好资源导航 » 文章资讯 » uniapp实现可滑动选项卡

uniapp实现可滑动选项卡

2023-07-13 17:48:03 90

本文实例为大家分享了uniapp实现可滑动选项卡的具体代码，供大家参考，具体内容如下

tabControl-tag.vue





{{item}}









.fxied{
position:fixed;
z-index:2;
}
.tabList{
padding-top:24rpx;
padding-left:24rpx;
padding-bottom:8rpx;
white-space:nowrap;
text-align:center;
.tabItem{
margin-right:60rpx;
display:inline-block;
position:relative;
text{
//font-size:30rpx;
line-height:44rpx;
color:#666;
transition:all0.3sease0s;
}
.activeLine{
//width:48rpx;
height:8rpx;
border-radius:4rpx;
background-color:#F57341;
margin-top:8rpx;
margin-left:50%;
transform:translateX(-50%);
opacity:0;
transition:all0.3sease0s;
}
}
.tabItem:first-child{
//margin-left:22rpx;
}
.tabItem:last-child{
margin-right:24rpx;
}
.thisOpenSelect{
text{
color:#333;
font-weight:600;
//font-size:32rpx;
}
.activeLine{
opacity:1;
}
}
}

页面引用

1.使用方式：

scrollFlag--是否开启选项滚动(true-开启false-关闭)根据自己需求如果选项长度超出屏幕长度建议开启
fixed--固定定位
bgc--背景色
values--选项数组
current--当前选中选项索引
isEqually--是否开启选项平分宽度(true,false)
lineWidth--下划线长度（在非平分选项状态下可能会影响选项盒子的宽度-自行调试想要的效果，默认为48rpx）
itemSize--未选中选项字体大小(默认为30rpx)
activeSize--选中选项字体大小(默认为32rpx)
activeColor--选中选项字体颜色(默认#333)
top--选项卡固定定位自定义top距离

注意：

使用fixed固定头部的时候要将页面整体padding-top：98rpx;不然会盖住内容区域。
使用swiper实现滑动切换时要将page高度设置100%swiper高度100%才可以全屏滑动切换

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

返回顶部
514930285
czq8825@qq.com

uniapp实现可滑动选项卡

热门推荐

随机推荐