微信小程序开发主页商品点击跳转详情界面

 2023-03-21 20:38:17  阅读 0

一、大致实现的功能讲解

当我们点击不同的商品 比如手机,那么会跳转到我们上一篇讲的文章中的分类界面进行显示热卖的手机信息。

首先在wxml中将每个商品图片加上跳转事件

因为我们点击分类后 就会跳转另一个界面这时候就需要使用自己定义的方法并且设置请求转发的路径

navigator
bindtap=" handleTypeJump"
wx: for="{{bigTypeList_row1}}"wx :for-item="bigType"
wx:key="id"
<image mode="widthFix" src="{baseUrl+' /image/bigType/'tbigType.image}}">x/image>
</navigator>

加入 bindtap事件

在这篇文章包括以后的学习中我们会经常使用这个函数 这个函数实现的是当你点击这个标签会跳转到自定义的方法中

点击跳转到 分类界面 上一章节的界面
但是我们需要考虑如何分辨是从 主页跳转过来的还是从 分类页进入的。

const app=getApp();
app.globalData.index=index;

解决办法就是设置全局参数 index

如果不是从主页过来的 那么index就是为0 默认第一个选中
如果是分类页面进入为-1

1/大类点击事件跳转商品分类页面handleTypeJump(e){
console.log(e)
const {index }=e.currentTarget.dataset;console.log("index=" +index)
const app=getApp();
app.globalData.index=index;
wX.switchTab(图
url: '/pages/category/index'B
},

继续调用该页面的查询事件等即可正常显示

 

标签:

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码