uniapp实现scroll-view滑块点击切换订单状态
点击滑块代码 ：// 切换标签
changeTab(index) {
console.log(index)
this.pageIndex = 1;
this.currentTab = index;
this.loadding = false;
// 左右滑动控制
var total = this.tabs.length;
if (index < 4) {
this.tabId = 0;
} else {
if (total - index > 4) {
this.tabId = index - 1;
} else {
this.tabId = index + 1;
}
}
if (index == 0) {
var status = 10;
} else {
var status = index;
}
console.log(status)
let that = this;
that.tui.request('user/order', {
type: 'plan',
status: status,
page: 1,
orderid: that.orderid
}).then((res) => {
console.log(res)
if (res.code == 1) {
that.list = res.data.list;
that.pageIndex = res.data.page;
} else {
that.list = res.data.list;
that.pageIndex = res.data.page;
}
})
},滑块定义代码：
<view class="tui-mtop">
<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="'scrollintoview_'+tabId" class="nui-scrollbox">
<view class="nui-scroll-view">
<view class="nui-tabs" :id="'scrollintoview_'+index" v-for="(item, index) in tabs" :key="index" :data-index="index" @click="changeTab(index)">
<view :class="currentTab==index?'nui-tab-nameact':'nui-tab-name'">
{{item.name}}
</view>
<view :class="currentTab==index?'nui-tab-lineact':'nui-tab-line'"></view>
</view>
</view>
</scroll-view>
</view>状态数组代码：
currentTab: 0,
tabs: [
// {
// name: "全部"
// },
{
name: "正常送"
},
// {
// name: "已延期"
// },
{
name: "待取奶"
},
{
name: "已取奶"
},
// {
// name: "已暂停"
// }
],
tabId: 0,
页:
[1]