uview的u-subsection分段器组件的使用

<template>
	<view>
		<u-subsection 
		:list="listChoose" 
		mode="subsection" 
		:current="listChooseCurrent"
		@change="changeItem"
		style="background-color: #00aa00;"
		>u-subsection>
		<u-subsection 
		:list="listPace" 
		mode="button" 
		bgColor="#00aa00" 
		activeColor="#00aa00" 
		inactiveColor="#fff"
		:current="listPaceCurrent"
		@change="changeBusiness"
		>u-subsection>
	view>
template>

<script>
	export default {
		data() {
			return {
				listChooseCurrent:0,
				listPaceCurrent:0,
				chooseurl: '',
				
				listChoose: ['金融快递员','办理扫码牌'],
				listPace: [
					{
						id: '00',
						name:'待受理'
					},
					{
						id: '01',
						name:'待上门'
					},
					{
						id: '02',
						name:'受理中'
					},
					{
						id: '03',
						name:'已结办'
					}
				]
			}
		},
		mounted() {
			this.changeItem(0),
			this.changeBusiness(0)
		},
		methods: {
			changeItem(index) {
				console.log(index)
				this.listChooseCurrent = index
				if(index==0) {
					// 填写真实url
					this.chooseurl = 'http://127.0.0.1:8000/item'
				}else {
					// 填写真实url
					this.chooseurl = 'http://127.0.0.1:8000/choose'
					// 点击后再自动调用一次选项，获取初始第一个
					this.changeBusiness(0)
				}
			},
			changeBusiness(index) {
				this.listPaceCurrent = index
				console.log(this.listPace[index].id)
				console.log(this.chooseurl+'?current=1&size=5&status='+this.listPace[index].id)
				// url填写真实地址
				// this.$request({
				// 	url:this.chooseurl+'?current=1&size=5&status='+this.listPace[index].id,
				// 	method: 'get'
				// }).then(rsp=> {
				// 	console.log(rsp)
				// })
			}
		}
	}
script>

<style>

style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89