這篇文章主要介紹了微信小程序頂部導(dǎo)航欄可滑動并選中放大,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
創(chuàng)新互聯(lián)專注于淇濱網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供淇濱營銷型網(wǎng)站建設(shè),淇濱網(wǎng)站制作、淇濱網(wǎng)頁設(shè)計(jì)、淇濱網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù),打造淇濱網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供淇濱網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
老規(guī)矩,先看效果圖
可以看到我們實(shí)現(xiàn)了如下功能
原理其實(shí)很簡單,我這里把我研究后的源碼發(fā)給大家吧。
wxml文件如下
<!-- 導(dǎo)航欄 --> <scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx"> <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}"> <view class="nav-text {{index==tabCur?'tab-on':''}}">{{item.name}}</view> </view> </scroll-view>
wxss文件如下
/* 導(dǎo)航欄布局相關(guān) */ .navbar { width: 100%; height: 90rpx; /* 文本不換行 */ white-space: nowrap; display: flex; box-sizing: border-box; border-bottom: 1rpx solid #eee; background: #fff; align-items: center; /* 固定在頂部 */ position: fixed; left: 0rpx; top: 0rpx; } .nav-item { padding-left: 25rpx; padding-right: 25rpx; height: 100%; display: inline-block; /* 普通文字大小 */ font-size: 28rpx; } .nav-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; letter-spacing: 4rpx; box-sizing: border-box; } .tab-on { color: #fbbd08; /* 選中放大 */ font-size: 38rpx !important; font-weight: 600; border-bottom: 4rpx solid #fbbd08 !important; }
js文件如下
// pages/test2/test2.js Page({ data: { tabCur: 0, //默認(rèn)選中 tabs: [{ name: '等待支付', id: 0 }, { name: '待發(fā)貨', id: 1 }, { name: '待收貨', id: 2 }, { name: '待簽字', id: 3 }, { name: '待評價(jià)', id: 4 }, { name: '五星好評', id: 5 }, { name: '差評訂單', id: 6 }, { name: '編程小石頭', id: 8 }, { name: '小石頭', id: 9 } ] }, //選擇條目 tabSelect(e) { this.setData({ tabCur: e.currentTarget.dataset.id, scrollLeft: (e.currentTarget.dataset.id - 2) * 200 }) } })
代碼里注釋很明白了,大家自己跟著多敲幾遍就可以了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文題目:微信小程序頂部導(dǎo)航欄可滑動并選中放大
瀏覽路徑:http://bm7419.com/article42/psddec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)