這篇文章主要介紹微信小程序怎樣實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在新華等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,營(yíng)銷型網(wǎng)站,外貿(mào)網(wǎng)站制作,新華網(wǎng)站建設(shè)費(fèi)用合理。

頂部用 scroll-view 組件橫向滾動(dòng)，類似tab選項(xiàng)卡的效果，內(nèi)容用類似模板方式引用，可重復(fù)利用

 
  {{item.name}}
 

   
   
   
   
   
   
   

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'
})

以上是“微信小程序怎樣實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：微信小程序怎樣實(shí)現(xiàn)頂部可滾動(dòng)導(dǎo)航效果-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://weahome.cn/article/dhdopi.html