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

这篇文章将为大家详细讲解有关微信小程序如何实现顶部导航栏滑动tab效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注于鄂尔多斯企业网站建设,成都响应式网站建设公司,商城网站建设。鄂尔多斯网站建设公司,为鄂尔多斯等地区提供建站服务。全流程专业公司，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

具体内容如下

效果图：

首先是滑动的效果：

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

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

 
 
  
  4?'border-bottom: 1rpx dotted #ddd;':''}}">{{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效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。