這篇文章給大家分享的是有關(guān)微信小程序如何實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)建站專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為紙箱等企業(yè)提供專業(yè)服務(wù)。需求是小程序做頭部做導(dǎo)航分類的效果
頂部用 scroll-view 組件橫向滾動(dòng),類似tab選項(xiàng)卡的效果,內(nèi)容用類似模板方式引用,可重復(fù)利用
<scroll-view class="scroll-view_H" scroll-x="{{true}}" > <view wx:for="{{classify}}" wx:key="id" data-type="{{item.id}}" class="scroll-view-item_H {{curTab==item.id?'sv-item-on':'sv-item-off'}}" bindtap="classifyClick"> {{item.name}} </view> </scroll-view> <block wx:if="{{curTab ==0}}"> <include src="recommend.wxml"/> </block> <block wx:elif="{{curTab==1}}"> <include src="fuli.wxml"/> </block> <block wx:elif="{{curTab==2}}"> <include src="other.wxml"/> </block> <block wx:elif="{{curTab==3}}"> <include src="other.wxml"/> </block> <block wx:elif="{{curTab==4}}"> <include src="other.wxml"/> </block> <block wx:elif="{{curTab==5}}"> <include src="other.wxml"/> </block> <block wx:else> <include src="other.wxml"/> </block>
PS:下面看下小程序動(dòng)態(tài)設(shè)置頂部導(dǎo)航條的方法
摘要
之所以記錄這個(gè),是因?yàn)樵谧鲆粋€(gè)小程序項(xiàng)目時(shí),老板需要我在一個(gè)頁面上index,在不同的時(shí)間段頂部導(dǎo)航的顏色需與背景相同。剛開始在老板未要求之前我都是想這樣做的,但是我百度方法一直未找到正確且合適的,所以我懵逼了,就偷偷懶用一個(gè)固定顏色就好了。哪知道后來老板看項(xiàng)目成果時(shí)提出看法說“頂部的顏色與背景色不同感覺不好看,是否可以同不同時(shí)間段的背景色一樣”,唉~老板不知我的痛,沒辦法只有聽老板的,所以我又認(rèn)真的看API了,終于看到了。
感覺這個(gè)需求會(huì)在我之后的項(xiàng)目中會(huì)用到,所以在這里做個(gè)筆記,
1.動(dòng)態(tài)設(shè)置當(dāng)前頁面的標(biāo)題 wx.setNavigationBarTitle(OBJECT)
object參數(shù)說明:
1.屬性:title - 類型:String - 必填:是 - 說明:頁面的標(biāo)題
2.屬性:success - 類型:Function - 必填:否- 說明:接口調(diào)用成功的回調(diào)函數(shù)
3.屬性:fail - 類型:Function - 必填:否 - 說明:接口調(diào)用失敗的回調(diào)函數(shù)
4.屬性:complete - 類型:Function - 必填:否 - 說明:接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功或失敗都會(huì)執(zhí)行)
wx.setNavigationBarTitle({ title:"當(dāng)前頁面" })
2.動(dòng)態(tài)設(shè)置頂部導(dǎo)航欄的背景色 wx.setNavigationBarColor(OBJECT)
object參數(shù)說明:
屬性-類型-必填-說明
1.fontColor - String - 是 - 前景顏色值,包括按鈕、標(biāo)題、狀態(tài)欄的顏色,僅支持#fff和#000
2.backgroundColor - String - 是 - 背景顏色,有效值為16進(jìn)制顏色
3.animation - Object - 否 - 動(dòng)畫效果
4.animation.duration - Number - 否 - 動(dòng)畫變化時(shí)間,默認(rèn)0,單位(毫秒)
5.animation.timingFunc - String - 否 - 動(dòng)畫變化方式,默認(rèn)linear
6.success - Function - 否 - 接口調(diào)用成功的回調(diào)函數(shù)
7.fail - Function - 否 - 接口調(diào)用失敗的回調(diào)函數(shù)
8.complete- Function - 否 - 接口調(diào)用結(jié)束的回調(diào)函數(shù)(成功、失敗都會(huì)執(zhí)行)
wx.setNavigationBarColor({ frontColor:'#ffffff', backgroundColor:'#ff0000' })
感謝各位的閱讀!關(guān)于“微信小程序如何實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
本文名稱:微信小程序如何實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果-創(chuàng)新互聯(lián)
分享鏈接:http://redsoil1982.com.cn/article0/dgjioo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、Google、定制開發(fā)、定制網(wǎng)站、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容