本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下
tabControl-tag.vue
{{item}}
页面引用
{{ item }}
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% 才可以全屏滑动切换
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。