快捷導(dǎo)航

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

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

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

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

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

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

首頁(yè)wxml代碼：

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

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

2.首頁(yè)js代碼：

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

3.詳情頁(yè)wxml代碼：

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

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

4.詳情頁(yè)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"]
? ? ? } ] ?// 本地?cái)?shù)據(jù)
? },

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

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

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

您可能感興趣的文章: