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

这篇文章主要介绍了微信小程序怎么自定义可滑动的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.jsComponent({        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            })          },    }})

scroll-view{    width: 100%;    height: 100%;    display: flex;  }  .menu{        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 {        height: 90%;    overflow-y: auto;      }    .tr{    width: 100%;  display: flex;  }.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;}

关于“微信小程序怎么自定义可滑动的tab切换”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序怎么自定义可滑动的tab切换”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。