微信小程序顶部导航栏滑动标签效果

小程序商品展示需要导航栏的商品分类进行滑动，供大家参考，具体内容如下

效果图：

首先是滑动的效果：

滚动-视图滚动-x='真'样式='宽度： 100%；空白： nowrap'/滚动视图小程序使用/滚动视图，横向移动即可

WXML:这里面我将导航栏显示类目定义为5个，每个20%,当超出5个分类，也就是指数四的时候，导航栏下面的省略号加上（因为tab-nac的边框底部只能显示到第五个分类)

滚动-视图滚动-x='真'样式='宽度： 100%；空白： nowrap'！-tab-view class=' tab ' view class=' tab-nav ' style=' font-size :12 px ' view wx : for=' { { tab nav。tabit em } } ' bind tap=' SetTab ' data-tabindex=' { { index } } ' style=' min-width 336020 '；最大宽度：20%;文本对齐：居中；height: 80rpx{{index4？边框-底部： 1rpx虚线# ddd: ' ' } } ' { { item。text } }/view view view class=' tab-line ' style=' width : { { 100/tab nav。tab num } } %；transform : translatex({ { 100 * show tab } } %)；"/view/view/view/view/scroll-view XSS 3360。选项卡{ display : flex flex-direction :柱；}.tab-nav { height : 80 rpx；背景# fffborder-bottom: 0.5rpx虚线# ddddisplay: flex线高： 79 rpx相对位置：} .tab-line {位置：绝对；左： 0；底部：-1rpx；高度： 4rpx背景技术# f7982atransition:全部0.3s}。选项卡-内容{ flex : 1；溢出-y:自动；溢出-x:隐藏；}JS:

从""导入util ./././utils/util。js '；页面({ data: { showtab: 0，//顶部选项卡索引tabnav: { tabnum: 5，tabitem: [ { 'id': 0，' text': '商品分类1' }，{ 'id': 1 '，文本' : '商品分类2' }，{ 'id': 2 '，文本' : '商品分类3' }，{ 'id': 3 '，文本' : '商品分类4' }，{ 'id': 4 '，文本' : '商品分类5' }，{ 'id': 5，' text': '商品分类6' }，{ 'id': 6，' text': '商品分类7' } ] }，productList: []，}，onLoad:函数(){ }，setTab:函数(e){ const edata=e . CurrentTarget。数据集；这个。setdata({ show tab : edata。tabindex，}) }，})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。