微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)tab切換效果的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下: (請(qǐng)自動(dòng)忽視底部tab.....)
簡(jiǎn)單介紹一下:頂部導(dǎo)航使用 scroll-view 組件 中間的內(nèi)容部分使用 swiper 組件
實(shí)現(xiàn)的邏輯就是: 先這樣在這樣,這樣然后那樣。(此處省略200個(gè)字)。
代碼如下,復(fù)制可用
wxml
<view class="contain"> <!-- 導(dǎo)航欄 --> <scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true"> <block wx:for="{{menuList}}" wx:key="index"> <view class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap='clickMenu'>{{item.name}}</view> </block> </scroll-view> <!-- 頁(yè)面 --> <swiper class="content" style='height: {{height}}px' duration="1000" current="{{currentTab}}" bindchange="changeContent"> <swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index">這里是{{item.name}}</swiper-item> </swiper> </view>
js
Page({ data: { menuList: [{ name: "快車(chē)" }, { name: "順風(fēng)車(chē)" }, { name: "外賣(mài)" }, { name: "單車(chē)" }, { name: "禮橙專(zhuān)車(chē)" }, { name: "出租車(chē)" }, { name: "公交" }, { name: "代駕" }, { name: "豪華車(chē)" }, { name: "自駕租車(chē)" }, { name: "拼車(chē)" }, { name: "二手車(chē)" }], tabScroll: 0, currentTab: 0, windowHeight: '', windowWidth: '' }, onLoad: function() { wx.getSystemInfo({ // 獲取當(dāng)前設(shè)備的寬高,文檔有 success: (res) => { this.setData({ windowHeight: res.windowHeight, windowWidth: res.windowWidth }) }, }) }, onReady: function() { wx.setNavigationBarTitle({ //修改標(biāo)題文字 title: '' }) }, clickMenu: function(e) { var current = e.currentTarget.dataset.current //獲取當(dāng)前tab的index var tabWidth = this.data.windowWidth / 5 // 導(dǎo)航tab共5個(gè),獲取一個(gè)的寬度 this.setData({ tabScroll: (current - 2) * tabWidth //使點(diǎn)擊的tab始終在居中位置 }) if (this.data.currentTab == current) { return false } else { this.setData({currentTab: current }) } }, changeContent: function(e) { var current = e.detail.current // 獲取當(dāng)前內(nèi)容所在index,文檔有 var tabWidth = this.data.windowWidth / 5 this.setData({ currentTab: current, tabScroll: (current - 2) * tabWidth }) } })
css
.contain{ width: 100%; height: 100%; } .tab{ width: 100%; height: 100rpx; position: fixed; top: 0; left: 0; z-index: 100; white-space: nowrap; box-sizing: border-box; overflow: hidden; line-height: 100rpx; } .tab-item{ display: inline-block; width: 20%; text-align: center; font-size: 14px; color: #8f9193; } .active{ color: #ff502c } .content{ padding-top: 100rpx; box-sizing: border-box; text-align: center; font-size: 14px; } .content-item{ overflow-y: scroll }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 (三)tabBar底部導(dǎo)航詳細(xì)介紹
- 微信小程序教程系列之設(shè)置標(biāo)題欄和導(dǎo)航欄(7)
- 微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法
- 微信小程序 開(kāi)發(fā)之頂部導(dǎo)航欄實(shí)例代碼
- 微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
- 詳解微信小程序設(shè)置底部導(dǎo)航欄目方法
- 微信小程序自定義導(dǎo)航隱藏和顯示功能
- 微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
- 小程序根據(jù)手機(jī)機(jī)型設(shè)置自定義底部導(dǎo)航距離
相關(guān)文章
js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)簡(jiǎn)單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01Javascript中call,apply,bind方法的詳解與總結(jié)
本文主要Javascript中call,apply,bind方法的進(jìn)行全面分析,并在文章結(jié)尾對(duì)call,apply,bind方法的聯(lián)系和區(qū)別做了總結(jié),具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12原生js實(shí)現(xiàn)自定義滾動(dòng)條組件
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義滾動(dòng)條組件的開(kāi)發(fā),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程
最近項(xiàng)目中遇到了一些功能需要與原生進(jìn)行混合開(kāi)發(fā),所以下面這篇文章主要給大家介紹了關(guān)于uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2022-07-07js判斷鼠標(biāo)位置是否在某個(gè)div中的方法
這篇文章主要介紹了js判斷鼠標(biāo)位置是否在某個(gè)div中的方法,涉及JavaScript針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素屬性操作相關(guān)技巧,需要的朋友可以參考下2016-02-02JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09