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

　　在开发项目中，要实现微信小程序自定义可滑动的tab切换。

　　下面就是自定义tab切换（可滑动）

　　<!--components/warn/warn.wxml-->
　　<view class="menu">
　　<navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator>
　　<!-- <view class="order-desc">按排名升序</view> -->
　　</view>
　　<swiper current='{{page}}' bindchange="changepage">
　　<swiper-item wx:for="{{shouye}}" wx:key="index">
　　<view class="view1">
　　<view class="table">
　　<view class="tr">
　　<view class="th">产品编号</view>
　　<view class="th">当前库存</view>
　　<view class="th">按时间倒序</view>
　　</view>
　　<block wx:for="{{saleData}}" wx:key="index">
　　<view class="tr bg-f3f4f4">
　　<view class="td">{{item.prodCode}}</view>
　　<view class="td">{{item.proName}}</view>
　　<view class="td">{{item.time}}</view>
　　</view>
　　</block>
　　<view class="all-tabledata">查看全部</view>
　　</view>
　　</view>
　　</swiper-item>
　　</swiper>

　　// components/warn/warn.js
　　Component({
　　/**
　　* 组件的属性列表
　　*/
　　properties: {
　　},
　　/**
　　* 组件的初始数据
　　*/
　　data: {
　　shouye: ['未处理', '已处理'],
　　page: 0,
　　saleData:[
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　},
　　{
　　prodCode:38749237093280,
　　proName:'1000',
　　time:'2021-12-12 14:00'
　　}
　　]
　　},
　　/**
　　* 组件的方法列表
　　*/
　　methods: {
　　change: function (event) {
　　var a = event.currentTarget.dataset.pageid
　　this.setData({
　　page: a
　　})
　　},
　　changepage: function (event) {
　　console.log(event)
　　var a = event.detail.current
　　this.setData({

　　page: a

　　})

　　},

　　}

　　})

　　/* components/warn/warn.wxss */
　　scroll-view{
　　width: 100%;
　　height: 100%;
　　display: flex;
　　}
　　.menu{
　　/* background-color: red;
　　display: flex;
　　height: 60rpx;
　　font-size: 40rpx;
　　line-height: 70rpx;
　　flex-direction: row;
　　justify-content: space-around; */
　　width: 100%;
　　height: 10%;
　　background: white;
　　display: flex;
　　align-items: center;
　　justify-content: space-around;
　　}
　　.font-white{
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　color: #FFFFFF;
　　background: #197FF0;
　　font-size: 16px;
　　font-family: PingFang SC;
　　font-weight: 400;
　　width: 200rpx;
　　height: 60rpx;
　　line-height: 60rpx;
　　opacity: 1;
　　border-radius: 34rpx;
　　}
　　.font-black{
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　font-size: 16px;
　　font-family: PingFang SC;
　　font-weight: 400;
　　color: #041320;
　　width: 200rpx;
　　height: 60rpx;
　　line-height: 60rpx;
　　background: #F6F6F6;
　　opacity: 1;
　　border-radius: 34rpx;
　　}
　　.view1{
　　height: 100%;
　　overflow-y: auto;
　　}
　　swiper {
　　/* width: 100%; */
　　height: 90%;
　　overflow-y: auto;
　　/* margin: 0 auto; */
　　}
　　/* 表格 */
　　.tr{
　　width: 100%;
　　display: flex;
　　/* justify-content: space-around; */
　　}
　　.bg-f3f4f4{
　　margin-bottom: 20rpx;
　　background:rgba(28, 41, 53,0.05)
　　}
　　.tr>.th:nth-child(1),.tr>.td:nth-child(1){
　　width: 40%;
　　text-align: center;
　　}
　　.tr>.th:nth-child(2),.tr>.td:nth-child(2){
　　width: 20%;
　　text-align: center;
　　}
　　.tr>.th:nth-child(3),.tr>.td:nth-child(3){
　　width: 40%;
　　text-align: center;
　　}
　　.th,.td{
　　font-size: 28rpx;
　　font-family: PingFang SC;
　　font-weight: 400;
　　line-height:80rpx;
　　color: #041320;
　　}
　　.all-tabledata{
　　font-size: 24rpx;
　　font-family: PingFang SC;
　　font-weight: 400;
　　height: 40rpx;
　　line-height:30rpx;
　　color: #187EEF;
　　text-align: center;
　　margin: 40rpx 0;
　　}

      内容已讲述完毕，请大家多多后续精彩内容。