微信小程式頁面跳轉功能中從清單的item項目跳到下一個頁面的實作方法-小程式開發-PHP中文網

微信小程式頁面跳轉功能中從清單的item項目跳到下一個頁面的實作方法

不言

發布： 2018-06-26 17:31:18

原創

3828 人瀏覽過

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

本文實例講述了微信小程式頁面跳轉功能之從列表的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中文網！
相關推薦：

微信小程式中input輸入及動態設定按鈕的實作

###在微信小程式中頁面間通訊的方式###############微信小程式中定義全域資料與函數重複使用及模版的介紹################ ###########

以上是微信小程式頁面跳轉功能中從清單的item項目跳到下一個頁面的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！