微信小程序怎么实现顶部导航栏滑动tab效果

本篇内容介绍了"微信小程序怎么实现顶部导航栏滑动tab效果"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

效果图：

首先是滑动的效果：

小程序使用,横向移动即可

WXML:这里面我将导航栏显示类目定义为5个，每个20%,当超出5个分类，也就是index>4的时候，导航栏下面的省略号加上（因为tab-nac的border-bottom只能显示到第五个分类）

      {{item.text}}         

wXSS:

.tab{ display: flex; flex-direction: column;}.tab-nav{ height: 80rpx; background: #fff; border-bottom: 0.5rpx dotted #ddd; display: flex; line-height: 79rpx; position: relative;} .tab-line{ position: absolute; left: 0; bottom: -1rpx; height: 4rpx; background: #f7982a; transition: all 0.3s;}.tab-content{ flex: 1; overflow-y: auto; overflow-x: hidden;}

JS：

import util from './../../utils/util.js';Page({ data: { showtab: 0, //顶部选项卡索引 tabnav: {  tabnum: 5,  tabitem: [  {   "id": 0,   "text": "商品分类1"  },  {   "id": 1,   "text": "商品分类2"  },  {   "id": 2,   "text": "商品分类3"  },  {   "id": 3,   "text": "商品分类4"  },  {   "id": 4,   "text": "商品分类5"  },  {   "id": 5,   "text": "商品分类6"  },  {   "id": 6,   "text": "商品分类7"  }  ] }, productList: [], }, onLoad: function () { }, setTab: function (e) { const edata = e.currentTarget.dataset; this.setData({  showtab: edata.tabindex,   }) },})

"微信小程序怎么实现顶部导航栏滑动tab效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！