這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何實(shí)現(xiàn)頂部導(dǎo)航欄滑動tab效果，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

白銀區(qū)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

具體內(nèi)容如下

效果圖：

首先是滑動的效果：

小程序使用,橫向移動即可

WXML:這里面我將導(dǎo)航欄顯示類目定義為5個，每個20%,當(dāng)超出5個分類，也就是index>4的時候，導(dǎo)航欄下面的省略號加上（因?yàn)閠ab-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, //頂部選項(xiàng)卡索引
 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,
  
 })
 },
})

關(guān)于“微信小程序如何實(shí)現(xiàn)頂部導(dǎo)航欄滑動tab效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享文章：微信小程序如何實(shí)現(xiàn)頂部導(dǎo)航欄滑動tab效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://weahome.cn/article/decdgi.html