微信小程式頁面跳躍功能-小程式開發-PHP中文網

微信小程式頁面跳躍功能

小云云

發布： 2017-12-07 15:59:40

原創

4422 人瀏覽過

本文主要介紹微信小程式頁面跳轉功能之從列表的item項跳到下一個頁面的方法,結合具體實例形式總結分析了微信小程式頁面跳轉及列表item項跳轉頁面的相關操作技巧,需要的朋友可以參考下。

一、效果圖

從左邊的清單頁調到右邊的詳情頁

二、頁面之間的跳轉

首先要看的是頁面的跳轉，微信小程式有三種跳轉方式可供選擇：

1、保留目前頁面，跳到應用程式內的某個頁面，使用wx.navigateBack可以回到原始頁面。

wx.navigateTo({
 url: &#39;test?id=1&#39;
})

登入後複製

2、關閉目前頁面，跳到應用程式內的某個頁面。

wx.redirectTo({
 url: &#39;test?id=1&#39;
})

登入後複製

3、跳到tabBar 頁面，並關閉其他所有非tabBar 頁面

wx.switchTab({
 url: &#39;/index&#39;
})

登入後複製

附註：wx.navigateBack(OBJECT)關閉目前頁面，回到上一頁或多層級頁面。可透過 getCurrentPages()) 取得目前的頁面棧，決定需要傳回幾層。

三、從列表item項目跳到下一個頁面

第一步，渲染列表，在元件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的資料重複渲染該元件。預設陣列的目前項目的下標變數名稱預設為index，陣列目前項目的變數名稱預設為item

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

登入後複製

第二步，使用wx:key為清單中的項目綁定標識符

<view wx:for="{{array}}" wx:key="{{item.viewid}}">
 {{index}}: {{item.message}}
</view>

登入後複製

第三步，為每一個item對應的連結傳遞對應的參數，在佈局頁面使用navigator導航元件，指定url並為每一個item對應的連結傳遞對應的參數，在URL後面跟上?以及鍵值就行，多個參數用&連接，例如：

url="../detail/detail?index={{item.viewid}}"

登入後複製

#四、demo原始碼

############################################### ##


  
    {{item.name}}

登入後複製

#########

Page({
 data: {
   words: [{message: &#39;微信小程序&#39;,viewid:&#39;1&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;2&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;3&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;4&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;5&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;6&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;7&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;8&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;9&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;}]
 }
 ...
})

登入後複製

###相關推薦：##########微信小程式如何實作圖片放大預覽功能############如何開發一個微信小程式的日期選擇器############總結有關小程式開發的經驗##################總結有關小程式開發的經驗##############

以上是微信小程式頁面跳躍功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！