快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面

更新時間：2022年06月24日 10:37:58 作者：Vue醬

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面的具體代碼，供大家參考，具體內(nèi)容如下

我們要實(shí)現(xiàn)如下的效果，進(jìn)入詳情頁，獲取產(chǎn)品的具體數(shù)據(jù)。本文請求的數(shù)據(jù)是本地的，實(shí)際開發(fā)是要通過ajax請求服務(wù)器中的產(chǎn)品數(shù)據(jù)，為了避免業(yè)務(wù)代碼擾亂視聽，只截取了關(guān)鍵代碼

1.首先我們需要兩個頁面，一個首頁（就是產(chǎn)品列表頁），一個詳情頁（產(chǎn)品的具體數(shù)據(jù)頁）

首頁wxml代碼：

這里舉例的是傳id到詳情頁，這樣詳情頁才知道我們需要加載的是哪個產(chǎn)品，也可以傳index下標(biāo)，不過感覺id更靠譜些。(id是你產(chǎn)品列表里面的數(shù)據(jù)，渲染列表時拿到的)

?<!-- bindtap綁定的是首頁跳轉(zhuǎn)函數(shù)， data-XX="這里綁定的是要傳到詳情頁的數(shù)據(jù)" （這里的傳的id） -->
?<view ?bindtap="skipTravelDetails" data-id="{{id}}">
? ? ?<view>
? ? ? ? ?<image ?src="{{article.imgArray[0]}}"/>
? ? ?</view>
</view>

2.首頁js代碼：

skipTravelDetails:function(e){
? ? ? ? let id=e.currentTarget.dataset.id //獲取點(diǎn)擊產(chǎn)品時拿到的id，就是data-id傳過來的值
? ? ? ? // wx.navigateTo跳轉(zhuǎn)頁面的方法
? ? ? ? //URL是傳遞的是詳情頁的路徑，把id拼接傳過去就可以啦
? ? ? ? wx.navigateTo({
? ? ? ? ? ? url: "./sonPage/details?id="+id,
? ? ? ? })
? ? }

3.詳情頁wxml代碼：

這里面就是你想要生成的頁面內(nèi)容，數(shù)據(jù)的顯示，結(jié)構(gòu)按需求自己寫~

<!-- photoImg就是需要渲染的數(shù)據(jù) -->
<view>
? ? <image src="{{photoImg}}" />
</view>

4.詳情頁js代碼：

data: {
? ? phptoImage: "",//匹配的數(shù)據(jù)
? ? imgList: [{
? ? ? ? id: 1,
? ? ? ? images: ["/images/a.jpg", "/images/chengDu.jpg", "/images/ac.jpg"]
? ? ? }, {
? ? ? ? id: 2,
? ? ? ? images: ["/images/chengDu.jpg", "/images/a.jpg"]
? ? ? }, {
? ? ? ? id: 3,
? ? ? ? images: ["/images/chongQing.jpg", "/images/chengDu.jpg"]
? ? ? } ] ?// 本地數(shù)據(jù)
? },

? onLoad: function (options) {
? ? // options.id 就是首頁傳過來的id，接下來循環(huán)找到id所匹配的數(shù)據(jù)就可以進(jìn)行渲染啦！
? ? this.data.imgList.forEach(item => {
? ? ? if (options.id == item.id) {
? ? ? ? this.setData({
? ? ? ? ? phptoImage: item.images
? ? ? ? })
? ? ? }
? ? })
? },

總結(jié)：整個操作就一個點(diǎn)擊bindtap點(diǎn)擊事件，和詳情頁onload生命周期函數(shù)就可以實(shí)現(xiàn)啦，它在頁面加載的時候進(jìn)行觸發(fā)，并可以通過（options）參數(shù)獲取到跳轉(zhuǎn)鏈接上面的辨識符(id),再通過（this.setData）把值（photoImage）更新顯示就完成了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: