1.微信小程序—點擊商品列表進入產品的詳情頁面

1.1構建詳情頁

app.json

"pages": ["pages/detail/detail" ],

1.2路由跳轉

1.2.1聲明式導航跳轉

使??程序 組件-導航-navigator

鏈接 navigator

邏輯：在navigator組件的url上寫入要跳轉的詳情頁地址,組件寫在產品列表最外層

// components/prolist/prolist.wxml <view class="prolist"> <!-- 聲明式導航 --><navigator url="{{'/pages/detail/detail?proid=' + item.proid}}"wx:for="{{prolist}}" wx:key="item.proid"><view class="proitem" ><view class="itemimg"><image class="img" src="{{item.proimg}}"></image></view><view class="iteminfo"><view class="title">{{item.proname}}</view><view class="price">￥{{item.price}}</view></view></view></navigator> </view>

1.2.2編程式導航

使??程序提供的 api—導航 實現編程式路由的跳轉

鏈接 wx.navigateTo

常用的有：

wx.navigateTo(Object object)
保留當前??，跳轉到應?內的某個??。但是不能跳到 tabbar ??。使?wx.navigateBack 可以返回到原??。?程序中??棧最多?層

wx.switchTab(Object object)
跳轉到某個tabbar ??，并關閉其他所有非 tabbar 頁面

邏輯：bindtap定義事件,采用data-params形式傳遞事件參數，并在事件中根據 event/a ( 隨便寫 )獲取該參數

// components/prolist/prolist.wxml<!-- 編程式導航 --> <view class="pro" wx:for="{{pros}}" wx:key="proid" data-proid='{{item.proid}}' bindtap='toDetail'><view class="imgitem"><image src="{{item.proimg}}"></image></view><view class="infoitem"><view class="title">{{item.proname}}</view><view class="price">￥{{item.price}}</view></view> </view> // components/prolist/prolist.js methods: { //組件的方法 // 編程式導航 跳轉到詳情頁toDetail(a){// console.log(a) // 獲取data-xxx數據const {proid} =a.currentTarget.datasetwx.navigateTo({url: `/pages/detail/detail?proid=${proid}`})}}

1.3詳情頁渲染

pages/detail/detail.wxml<view class="detailItem"><view class="detailImg"><image src="{{proDetail.proimg}}"/></view><view class="detailInfo"><view>{{proDetail.proname}}</view><view class="detailPrice">￥{{proDetail.price}}</view><view>{{proDetail.note}}</view></view> </view> pages/detail/detail.jsimport { requestFn } from './../../utils/index.js' //引用發起請求的自定義的函數 Page({onLoad: function (options) {// console.log(options,12) //獲取編程導航地址欄攜帶信息this.getdetailDataFn(options)//調用產品詳情頁函數},// 產品詳情頁getdetailDataFn(a) { //console.log(a) //獲取編程導航地址欄攜帶信息const { proid } = a //獲取詳情頁產品idrequestFn({ url: '/pro/detail?proid=' + proid }).then(res => {var article = res.data.data.detail;this.setData({proDetail: res.data.data})})} }) utils/index.js //自定義的發起請求的函數const baseUrl = 'http://daxun.kuboy.top/api' export function requestFn(options){const { url, data, method}=options;wx.showLoading({title:"加載中"})return new Promise((resolve,reject)=>{wx.request({url:baseUrl+url,data:data||{},//默認值method:method||'GET',success:(res)=>{resolve(res)},fail:err=>{reject(err)},complete:()=>{wx.hideLoading()}})}) }

總結

以上是生活随笔為你收集整理的逆战GOGO之微信小程序—点击商品列表进入详情页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。