微信小程序自定义可滑动的tab切换

本文实例为大家分享了微信小程序自定义tab切换（可滑动），供大家参考，具体内容如下
自定义tab切换（可滑动）

1. <!--components/warn/warn.wxml-->
2. <view class="menu">
3. <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator>
4. <!-- <view class="order-desc">按排名升序</view> -->
5. </view>
6. <swiper current='{{page}}' bindchange="changepage">
7. <swiper-item wx:for="{{shouye}}" wx:key="index">
8.   <view class="view1">
9.    <view class="table">
10.     <view class="tr">
11.      <view class="th">产品编号</view>
12.      <view class="th">当前库存</view>
13.      <view class="th">按时间倒序</view>
14.     </view>
15.     <block wx:for="{{saleData}}" wx:key="index">
16.      <view class="tr bg-f3f4f4">
17.       <view class="td">{{item.prodCode}}</view>
18.       <view class="td">{{item.proName}}</view>
19.       <view class="td">{{item.time}}</view>
20.      </view>
21.     </block>
22.     <view class="all-tabledata">查看全部</view>
23.    </view>
24.   </view>
25. </swiper-item>
26. </swiper>

复制代码

1. // components/warn/warn.js
2. Component({
3.   /**
4.   * 组件的属性列表
5.   */
6.   properties: {
8.   },
10.   /**
11.   * 组件的初始数据
12.   */
13.   data: {
14.     shouye: ['未处理', '已处理'],
15.     page: 0,
16.     saleData:[
17.      {
18.        prodCode:38749237093280,
19.        proName:'1000',
20.        time:'2021-12-12 14:00'
21.      },
22.      {
23.        prodCode:38749237093280,
24.        proName:'1000',
25.        time:'2021-12-12 14:00'
26.      },
27.      {
28.        prodCode:38749237093280,
29.        proName:'1000',
30.        time:'2021-12-12 14:00'
31.      },
32.      {
33.        prodCode:38749237093280,
34.        proName:'1000',
35.        time:'2021-12-12 14:00'
36.      },
37.      {
38.        prodCode:38749237093280,
39.        proName:'1000',
40.        time:'2021-12-12 14:00'
41.      },
42.      {
43.        prodCode:38749237093280,
44.        proName:'1000',
45.        time:'2021-12-12 14:00'
46.      },
47.      {
48.        prodCode:38749237093280,
49.        proName:'1000',
50.        time:'2021-12-12 14:00'
51.      },
52.      {
53.        prodCode:38749237093280,
54.        proName:'1000',
55.        time:'2021-12-12 14:00'
56.      },
57.      {
58.        prodCode:38749237093280,
59.        proName:'1000',
60.        time:'2021-12-12 14:00'
61.      },
62.      {
63.        prodCode:38749237093280,
64.        proName:'1000',
65.        time:'2021-12-12 14:00'
66.      },
67.      {
68.        prodCode:38749237093280,
69.        proName:'1000',
70.        time:'2021-12-12 14:00'
71.      },
72.      {
73.        prodCode:38749237093280,
74.        proName:'1000',
75.        time:'2021-12-12 14:00'
76.      },
77.      {
78.        prodCode:38749237093280,
79.        proName:'1000',
80.        time:'2021-12-12 14:00'
81.      },
82.      {
83.        prodCode:38749237093280,
84.        proName:'1000',
85.        time:'2021-12-12 14:00'
86.      },
87.      {
88.        prodCode:38749237093280,
89.        proName:'1000',
90.        time:'2021-12-12 14:00'
91.      }
92.    ]
93.    },
95.   /**
96.   * 组件的方法列表
97.   */
98.   methods: {
99.     change: function (event) {
100.       var a = event.currentTarget.dataset.pageid
101.       this.setData({
102.        page: a
103.       })
104.      },
105.      changepage: function (event) {
106.       console.log(event)
107.       var a = event.detail.current
108.       this.setData({
109.        page: a
110.       })
111.      },
112.   }
113. })

复制代码

1. /* components/warn/warn.wxss */
3. scroll-view{
4.   width: 100%;
5.   height: 100%;
6.   display: flex;
7. }
8. .menu{
9.   /* background-color: red;
10.   display: flex;
11.   height: 60rpx;
12.   font-size: 40rpx;
13.   line-height: 70rpx;
14.   flex-direction: row;
15.   justify-content: space-around; */
16.   width: 100%;
17.   height: 10%;
18.   background: white;
19.   display: flex;
20.   align-items: center;
21.   justify-content: space-around;
22. }
23. .font-white{
24.   display: flex;
25.   flex-direction: column;
26.   align-items: center;
27.   color: #FFFFFF;
28.   background: #197FF0;
29.   font-size: 16px;
30.   font-family: PingFang SC;
31.   font-weight: 400;
32.   width: 200rpx;
33.   height: 60rpx;
34.   line-height: 60rpx;
35.   opacity: 1;
36.   border-radius: 34rpx;
37. }
38. .font-black{
39.   display: flex;
40.   flex-direction: column;
41.   align-items: center;
42.   font-size: 16px;
43.   font-family: PingFang SC;
44.   font-weight: 400;
45.   color: #041320;
46.   width: 200rpx;
47.   height: 60rpx;
48.   line-height: 60rpx;
49.   background: #F6F6F6;
50.   opacity: 1;
51.   border-radius: 34rpx;
52. }
53. .view1{
54.   height: 100%;
55.   overflow-y: auto;
56. }
57. swiper {
58.   /* width: 100%; */
59.   height: 90%;
60.   overflow-y: auto;
61.   /* margin: 0 auto; */
62. }
63. /* 表格 */
64. .tr{
65.   width: 100%;
66. display: flex;
67. /* justify-content: space-around;   */
68. }
69. .bg-f3f4f4{
70.    margin-bottom: 20rpx;
71.   background:rgba(28, 41, 53,0.05)
72. }
73. .tr>.th:nth-child(1),.tr>.td:nth-child(1){
74.   width: 40%;
75.   text-align: center;
76. }
77. .tr>.th:nth-child(2),.tr>.td:nth-child(2){
78.   width: 20%;
79.   text-align: center;
80. }
81. .tr>.th:nth-child(3),.tr>.td:nth-child(3){
82.   width: 40%;
83.   text-align: center;
84. }
85. .th,.td{
86. font-size: 28rpx;
87. font-family: PingFang SC;
88. font-weight: 400;
89. line-height:80rpx;
90. color: #041320;
91. }
92. .all-tabledata{
93. font-size: 24rpx;
94. font-family: PingFang SC;
95. font-weight: 400;
96. height: 40rpx;
97. line-height:30rpx;
98. color: #187EEF;
99. text-align: center;
100. margin: 40rpx 0;
101. }

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。