這篇文章給大家分享的是有關(guān)微信小程序如何實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

10多年的贛州網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整贛州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“贛州網(wǎng)站設(shè)計(jì)”,“贛州網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

需求是小程序做頭部做導(dǎo)航分類(lèi)的效果

頂部用 scroll-view 組件橫向滾動(dòng)，類(lèi)似tab選項(xiàng)卡的效果，內(nèi)容用類(lè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è)頁(yè)面上index，在不同的時(shí)間段頂部導(dǎo)航的顏色需與背景相同。剛開(kāi)始在老板未要求之前我都是想這樣做的，但是我百度方法一直未找到正確且合適的，所以我懵逼了，就偷偷懶用一個(gè)固定顏色就好了。哪知道后來(lái)老板看項(xiàng)目成果時(shí)提出看法說(shuō)“頂部的顏色與背景色不同感覺(jué)不好看，是否可以同不同時(shí)間段的背景色一樣”，唉~老板不知我的痛，沒(méi)辦法只有聽(tīng)老板的，所以我又認(rèn)真的看API了,終于看到了。

感覺(jué)這個(gè)需求會(huì)在我之后的項(xiàng)目中會(huì)用到，所以在這里做個(gè)筆記，

1.動(dòng)態(tài)設(shè)置當(dāng)前頁(yè)面的標(biāo)題  wx.setNavigationBarTitle(OBJECT)

object參數(shù)說(shuō)明：

1.屬性：title - 類(lèi)型：String - 必填：是 - 說(shuō)明：頁(yè)面的標(biāo)題

2.屬性：success - 類(lèi)型：Function - 必填：否- 說(shuō)明：接口調(diào)用成功的回調(diào)函數(shù)

3.屬性：fail - 類(lèi)型：Function - 必填：否 - 說(shuō)明：接口調(diào)用失敗的回調(diào)函數(shù)

4.屬性：complete - 類(lèi)型：Function - 必填：否 - 說(shuō)明：接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功或失敗都會(huì)執(zhí)行）

wx.setNavigationBarTitle({
    title:"當(dāng)前頁(yè)面"
})

2.動(dòng)態(tài)設(shè)置頂部導(dǎo)航欄的背景色 wx.setNavigationBarColor(OBJECT)

object參數(shù)說(shuō)明：

  屬性-類(lèi)型-必填-說(shuō)明

1.fontColor - String - 是 - 前景顏色值，包括按鈕、標(biāo)題、狀態(tài)欄的顏色，僅支持#fff和#000

2.backgroundColor - String - 是 - 背景顏色,有效值為16進(jìn)制顏色

3.animation - Object - 否 - 動(dòng)畫(huà)效果

4.animation.duration - Number - 否 - 動(dòng)畫(huà)變化時(shí)間，默認(rèn)0，單位（毫秒）

5.animation.timingFunc - String - 否 - 動(dòng)畫(huà)變化方式，默認(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í)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)標(biāo)題：微信小程序如何實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果
當(dāng)前地址：http://jinyejixie.com/article6/ipijog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、做網(wǎng)站、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)