微信小程序自定義可滑動頂部TabBar選項(xiàng)卡實(shí)現(xiàn)頁面切換功能示例
本文實(shí)例講述了微信小程序自定義可滑動頂部TabBar選項(xiàng)卡實(shí)現(xiàn)頁面切換功能。分享給大家供大家參考,具體如下:
頂部滾動選項(xiàng)卡
話不多說,直接上代碼
pages/home/home.wxml
<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;background: #fff;border-bottom:{{index>4?'1rpx solid #ddd;':''}}">{{item.text}}</view> <view> <view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view> </view> </view> </view> </scroll-view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:150rpx" bindchange="bindChange"> <swiper-item> <view>分類1</view> </swiper-item> <swiper-item> <view>分類2</view> </swiper-item> <swiper-item> <view>分類3</view> </swiper-item> <swiper-item> <view>分類4</view> </swiper-item> <swiper-item> <view>分類5</view> </swiper-item> <swiper-item> <view>分類6</view> </swiper-item> </swiper>
pages/home/home.wxss
.tab { display: flex; flex-direction: column; } .tab-nav { border-bottom: 1rpx solid #ddd; width: 100%; height: 80rpx; 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; } /*選項(xiàng)卡頁面聯(lián)動切換*/ .swiper-tab { width: 100%; border-bottom: 2rpx solid #777; text-align: center; line-height: 80rpx; } .swiper-tab-list { font-size: 30rpx; display: inline-block; width: 33.33%; color: #777; } .on { color: #da7c0c; border-bottom: 1rpx solid #da7c0c; } .swiper-box { display: block; height: 100%; width: 100%; overflow: hidden; } .swiper-box view { text-align: center; }
pages/home/home.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" } ] }, productList: [], // tab切換 currentTab: 0, }, onLoad: function () { }, setTab: function (e) { var that = this that.setData({ showtab: e.currentTarget.dataset.tabindex }) if (this.data.currentTab === e.currentTarget.dataset.tabindex) { return false; } else { that.setData({ currentTab: e.currentTarget.dataset.tabindex }) } }, /** * 滑動切換tab */ bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current, showtab: e.detail.current}); } })
該代碼實(shí)現(xiàn)基于兩個(gè)大神的代碼,(鏈接: http://www.dbjr.com.cn/article/161227.htm 和http://www.dbjr.com.cn/article/155522.htm),在兩位大神的基礎(chǔ)上衍生出的可滾動的頂部選項(xiàng)卡,在此致謝。代碼缺陷:當(dāng)向右滑動到第6個(gè)頁面的時(shí)候選項(xiàng)卡沒有自動滑動。
希望本文所述對大家微信小程序開發(fā)有所幫助。
- 微信小程序下面商品左右滑動上面tab也跟隨變動功能實(shí)現(xiàn)
- 微信小程序tab左右滑動切換功能的實(shí)現(xiàn)代碼
- 微信小程序tab切換可滑動切換導(dǎo)航欄跟隨滾動實(shí)現(xiàn)代碼
- 微信小程序頂部導(dǎo)航欄滑動tab效果
- 10行代碼實(shí)現(xiàn)微信小程序滑動tab切換
- 微信小程序滾動Tab實(shí)現(xiàn)左右可滑動切換
- 微信小程序開發(fā)之實(shí)現(xiàn)選項(xiàng)卡(窗口頂部TabBar)頁面切換
- 微信小程序?qū)崿F(xiàn)tab左右切換效果
- 微信小程序 Tab頁切換更新數(shù)據(jù)
- 微信小程序自定義可滑動的tab切換
相關(guān)文章
javascript使用正則實(shí)現(xiàn)去掉字符串前面的所有0
這篇文章主要介紹了javascript使用正則實(shí)現(xiàn)去掉字符串前面的所有0,需要的朋友可以參考下2018-07-07javascript代碼優(yōu)化的8點(diǎn)總結(jié)
本篇文章給大家分享了關(guān)于javascript代碼優(yōu)化的8點(diǎn)總結(jié),希望我們整理的內(nèi)容能夠幫助到大家。2018-01-01javascript實(shí)現(xiàn)的猜數(shù)小游戲完整實(shí)例代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)的猜數(shù)小游戲,游戲中用戶共有10次猜測機(jī)會,并且每次都有不同的提示信息,該游戲涉及javascript流程控制與數(shù)值運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2016-05-05Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺開發(fā)工具,支持在一套代碼中開發(fā)出運(yùn)行于各大平臺的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面的相關(guān)資料,需要的朋友可以參考下2023-09-09JavaScript實(shí)現(xiàn)拖拽和縮放效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖拽和縮放效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08JavaScript數(shù)據(jù)推送Comet技術(shù)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)推送Comet技術(shù),感興趣的小伙伴們可以參考一下2016-04-04