微信小程序自定义可滑动的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;
}

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

查看更多关于微信小程序自定义可滑动的tab切换的详细内容...