uview的u-subsection分段器组件的使用
<!-- vue文件-->
<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>