uniapp实现scroll-view滑块点击切换订单状态

admin

点击滑块代码 ：

1. // 切换标签
   
2.                         changeTab(index) {
   
3.                                 console.log(index)
   
4.                                 this.pageIndex = 1;
   
5.                                 this.currentTab = index;
   
6.                                 this.loadding = false;
   
7.                                 // 左右滑动控制
   
8.                                 var total = this.tabs.length;
   
9.                                 if (index < 4) {
   
10.                                         this.tabId = 0;
    
11.                                 } else {
    
12.                                         if (total - index > 4) {
    
13.                                                 this.tabId = index - 1;
    
14.                                         } else {
    
15.                                                 this.tabId = index + 1;
    
16.                                         }
    
17.                                 }
    
18.                                 if (index == 0) {
    
19.                                         var status = 10;
    
20.                                 } else {
    
21.                                         var status = index;
    
22.                                 }
    
23.                                 console.log(status)
    
24.                                 let that = this;
    
25.                                 that.tui.request('user/order', {
    
26.                                         type: 'plan',
    
27.                                         status: status,
    
28.                                         page: 1,
    
29.                                         orderid: that.orderid
    
30.                                 }).then((res) => {
    
31.                                         console.log(res)
    
32.                                         if (res.code == 1) {
    
33.                                                 that.list = res.data.list;
    
34.                                                 that.pageIndex = res.data.page;
    
35.                                         } else {
    
36.                                                 that.list = res.data.list;
    
37.                                                 that.pageIndex = res.data.page;
    
38.                                         }
    
39.                                 })
    
40.                         },

复制代码

滑块定义代码：

1. <view class="tui-mtop">
   
2.                         <scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="'scrollintoview_'+tabId" class="nui-scrollbox">
   
3.                                 <view class="nui-scroll-view">
   
4.                                         <view class="nui-tabs" :id="'scrollintoview_'+index" v-for="(item, index) in tabs" :key="index" :data-index="index" @click="changeTab(index)">
   
5.                                                 <view :class="currentTab==index?'nui-tab-nameact':'nui-tab-name'">
   
6.                                                         {{item.name}}
   
7.                                                 </view>
   
8.                                                 <view :class="currentTab==index?'nui-tab-lineact':'nui-tab-line'"></view>
   
9.                                         </view>
   
10.                                 </view>
    
11.                         </scroll-view>
    
12.                 </view>

复制代码

状态数组代码：

1. currentTab: 0,
   
2.                                 tabs: [
   
3.                                         // {
   
4.                                         //         name: "全部"
   
5.                                         // },
   
6.                                         {
   
7.                                                 name: "正常送"
   
8.                                         },
   
9.                                         // {
   
10.                                         //         name: "已延期"
    
11.                                         // },
    
12.                                         {
    
13.                                                 name: "待取奶"
    
14.                                         },
    
15.                                         {
    
16.                                                 name: "已取奶"
    
17.                                         },
    
18.                                         // {
    
19.                                         //         name: "已暂停"
    
20.                                         // }
    
21.                                 ],
    
22.                                 tabId: 0,

复制代码