欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年01月28日 15:26:25   作者：皮蛋小粥  
這篇文章主要為大家詳細(xì)介紹了微信小程序頂部導(dǎo)航欄滑動tab效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果圖：

首先是滑動的效果：

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

小程序使用</scroll-view>,橫向移動即可

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

<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, //頂部選項卡索引
 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偽數(shù)組和數(shù)組的使用與區(qū)別

    JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別

    這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • JavaScript觀察者模式(經(jīng)典)

    JavaScript觀察者模式(經(jīng)典)

    Observer模式也叫觀察者模式，是由GoF提出的23種軟件設(shè)計模式的一種。Observer模式是行為模式之一，它的作用是當(dāng)一個對象的狀態(tài)發(fā)生變化時，能夠自動通知其他關(guān)聯(lián)對象，自動刷新對象狀態(tài)
    2015-12-12
  • Javascript 修改String 對象 增加去除空格功能(示例代碼)

    Javascript 修改String 對象 增加去除空格功能(示例代碼)

    這篇文章主要介紹了Javascript 修改String 對象 增加去除空格功能(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助
    2013-11-11
  • js實現(xiàn)九宮格抽獎

    js實現(xiàn)九宮格抽獎

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • js隱式轉(zhuǎn)換的知識實例講解

    js隱式轉(zhuǎn)換的知識實例講解

    在本篇文章中，小編給大家分享了關(guān)于js隱式轉(zhuǎn)換的相關(guān)知識點內(nèi)容，有興趣的朋友們參考學(xué)習(xí)下。
    2018-09-09
  • Echarts實現(xiàn)點擊列表聯(lián)動餅圖的示例代碼

    Echarts實現(xiàn)點擊列表聯(lián)動餅圖的示例代碼

    本文主要介紹了Echarts實現(xiàn)點擊列表聯(lián)動餅圖的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Javascript 實現(xiàn)圖片無縫滾動

    Javascript 實現(xiàn)圖片無縫滾動

    這篇文章主要介紹了Javascript 實現(xiàn)圖片無縫滾動的相關(guān)資料,需要的朋友可以參考下
    2014-12-12
  • 微信小程序?qū)崿F(xiàn)文件預(yù)覽

    微信小程序?qū)崿F(xiàn)文件預(yù)覽

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文件預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • js 手機(jī)號碼合法性驗證代碼集合

    js 手機(jī)號碼合法性驗證代碼集合

    下面是JS驗證電話號碼的代碼，很實用，獻(xiàn)給大家
    2012-09-09
  • JS與jQuery實現(xiàn)ListBox上移,下移,左移,右移操作功能示例

    JS與jQuery實現(xiàn)ListBox上移,下移,左移,右移操作功能示例

    這篇文章主要介紹了JS與jQuery實現(xiàn)ListBox上移,下移,左移,右移操作功能,涉及javascript與jQuery的事件響應(yīng)、頁面元素動態(tài)操作等相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2018-05-05

最新評論