這篇文章主要介紹了微信小程式頁面跳轉功能之從清單的item項跳到下一個頁面的方法,結合具體實例形式總結分析了微信小程式頁面跳轉及清單item項跳轉頁面的相關操作技巧,需要的朋友可以參考下
本文實例講述了微信小程式頁面跳轉功能之從列表的item項跳到下一個頁面的方法。分享給大家供大家參考，具體如下：
很多項目都會有訊息記錄頁，即列表頁，緊接著就是點擊列表的某一項進入到消息的詳情頁，這裡承接上一篇文章，繼續分享如何從清單的item項目跳到下一個頁面。
一、效果圖
從左邊的清單頁調到右邊的詳情頁
二、頁面之間的跳轉
首先要看的是頁面的跳轉，微信小程式有三種跳轉方式可供選擇：
1、保留目前頁面，跳到應用程式內的某個頁面，使用wx.navigateBack可以回到原始頁面。
wx.navigateTo({
url: 'test?id=1'
})2、關閉目前頁面，跳到應用程式內的某個頁面。
wx.redirectTo({
url: 'test?id=1'
})3、跳到tabBar 頁面，並關閉其他所有非tabBar 頁面
wx.switchTab({
url: '/index'
})#附註：wx.navigateBack(OBJECT)關閉目前頁面，返回上一頁面或多層頁面。可透過 getCurrentPages()) 取得目前的頁面棧，決定需要傳回幾層。
三、從列表item項目跳到下一個頁面
第一步，渲染列表，在元件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的資料重複渲染該元件。預設陣列的目前項目的下標變數名稱預設為index，陣列目前項目的變數名稱預設為item
#<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view><view wx:for="{{array}}" wx:key="{{item.viewid}}">
{{index}}: {{item.message}}
</view>url="../detail/detail?index={{item.viewid}}"
四、demo原始碼
#{{item.name}}
Page({
data: {
words: [{message: '微信小程序',viewid:'1',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'2',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'3',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'4',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'5',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'6',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'7',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'8',time:'2017-01-09 8:00:00',money:'hello'},
{message: '微信小程序',viewid:'9',time:'2017-01-09 8:00:00',money:'hello'}]
}
...
})#以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
###在微信小程式中頁面間通訊的方式###############微信小程式中定義全域資料與函數重複使用及模版的介紹################ ###########
以上是微信小程式頁面跳轉功能中從清單的item項目跳到下一個頁面的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
