小程序開發(fā)中如何實(shí)現(xiàn)一個(gè)點(diǎn)擊導(dǎo)航條跳轉(zhuǎn)頁(yè)面功能？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)是專業(yè)的昆都侖網(wǎng)站建設(shè)公司，昆都侖接單;提供網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行昆都侖網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

具體內(nèi)容如下

黃色部分是不可以滑動(dòng)的，藍(lán)色部分可以滑動(dòng)。

代碼解說(shuō)：

• 首先我在js自定義了navState參數(shù)用于判斷導(dǎo)航的當(dāng)前狀態(tài)，
• 定義了data-index用于js中動(dòng)態(tài)修改導(dǎo)航的當(dāng)前狀態(tài)，
• nav-switch-style為選擇導(dǎo)航條時(shí)的樣式，
• 不可滑動(dòng)視圖切換很簡(jiǎn)單，用wx:if判斷狀態(tài)顯示相應(yīng)頁(yè)就好了，
• 滑動(dòng)頁(yè)視圖切換要用到swiper和 swiper-item，
• 用bindchang方法監(jiān)聽(tīng)滑塊，current 改變時(shí)會(huì)觸發(fā) change 事件（還有個(gè)bindanimationfinish方法監(jiān)聽(tīng)也是可以用的，詳細(xì)請(qǐng)看官方文檔）
• 動(dòng)態(tài)的綁定了current滑塊的index，這樣就可以實(shí)現(xiàn)點(diǎn)擊導(dǎo)航條滑塊跟著滾動(dòng)，
• 相反的，當(dāng)滑動(dòng)滑塊時(shí)，就可以根據(jù)current的值來(lái)動(dòng)態(tài)修改導(dǎo)航的狀態(tài)了。

wxml代碼：

 頁(yè)面一
 頁(yè)面二
 頁(yè)面三



 1
 2
 3



 
 
 
 左右可滑動(dòng)1
 
 
 
 
 左右可滑動(dòng)2
 
 
 
 
 左右可滑動(dòng)3
 
 
 

分享名稱：小程序開發(fā)中如何實(shí)現(xiàn)一個(gè)點(diǎn)擊導(dǎo)航條跳轉(zhuǎn)頁(yè)面功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://weahome.cn/article/doosee.html