微信小程序頂部導(dǎo)航欄滑動(dòng)tab效果

更新時(shí)間：2019年01月28日 15:26:25 作者：皮蛋小粥

這篇文章主要為大家詳細(xì)介紹了微信小程序頂部導(dǎo)航欄滑動(dòng)tab效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

小程序商品展示需要導(dǎo)航欄的商品分類進(jìn)行滑動(dòng)，供大家參考，具體內(nèi)容如下

效果圖：

首先是滑動(dòng)的效果：

<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
</scroll-view>

小程序使用</scroll-view>,橫向移動(dòng)即可

WXML:這里面我將導(dǎo)航欄顯示類目定義為5個(gè)，每個(gè)20%,當(dāng)超出5個(gè)分類，也就是index>4的時(shí)候，導(dǎo)航欄下面的省略號加上（因?yàn)閠ab-nac的border-bottom只能顯示到第五個(gè)分類）

<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
 <!-- tab -->
 <view class="tab">
  <view class="tab-nav" style='font-size:12px'>
  <view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;
{{index>4?'border-bottom: 1rpx dotted #ddd;':''}}">{{item.text}}</view>
  <view >
  <view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
  </view>
  </view>
 </view>
</scroll-view>

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,
  
 })
 },
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript地理位置信息API
這篇文章主要介紹了JavaScript地理位置信息API的相關(guān)資料,需要的朋友可以參考下
2016-06-06
推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11)
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因?yàn)閕e11取消了很多低版本的判斷，很多js都需要修改了，這里簡單介紹下需要的朋友可以參考下
2015-12-12
JavaScript如何將數(shù)據(jù)處理成樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript如何將數(shù)據(jù)處理成樹形結(jié)構(gòu)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
JavaScript數(shù)組去重的幾種方法
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JS前端首屏優(yōu)化技巧
這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能
這篇文章主要為大家詳細(xì)介紹了bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
如何使用webpack5+TypeScript+npm發(fā)布組件庫
這篇文章主要介紹了如何使用webpack5+TypeScript+npm發(fā)布組件庫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-04-04
定時(shí)器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法
setInterval()方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式,setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式，詳細(xì)使用方法可以參考下本文
2013-03-03
js 操作table之移動(dòng)TR位置兼容FF 跟 IE
js操作table之移動(dòng)TR位置兼容FF 跟 IE,需要的朋友可以參考下。
2009-11-11
你必須知道的Javascript知識(shí)點(diǎn)之"字面量和對應(yīng)類型"說明介紹
本篇文章小編為大家介紹，你必須知道的Javascript知識(shí)點(diǎn)之"字面量和對應(yīng)類型"。需要的朋友參考下
2013-04-04