这篇文章主要介绍了微信小程序怎么自定义可滑动的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切换”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序怎么自定义可滑动的tab切换”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
