微信小程序自定义可滑动的tab切换
作者：常安cc
这篇文章主要为大家详细介绍了微信小程序自定义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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。