微信小程序wx:for遍历列表后点击不同列表跳转不同页面

wxml代码

<view class="shangpingflex"><view wx:for="{{shangpinglan}}" wx:key="{{item.id}}" bindtap='changBtn' data-id="{{item.id}}"><view class="biankuang"><image src="{{item.img}}" mode="widthFix"></image><view style="color: red;">{{item.price}}</view><view>{{item.title}}</view></view></view>
</view>

JS代码data里面编写

    shangpinglan: [{id: '01',img: "https://img12.360buyimg.com/n7/jfs/t1/32460/11/17666/17264/63193af5E8dba89ac/d468918fb41ad2bc.jpg",price: "8899.00",title: "14 Pro  (A2892) 256GB 暗紫色 支持移动联通电信5G 双卡双待手机",},{id: "02",img: "https://img10.360buyimg.com/n7/jfs/t1/132022/23/12216/60913/5f86195bEacd08599/c5dc348d3f943324.jpg",price: "4399.00",title: "11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",},{id: '03',img: "    https://img14.360buyimg.com/n7/jfs/t1/170203/19/29803/19184/6319229dE781a8a87/1a2d336dfe4fa89f.jpg",price: "6899.00",title: "14 (A2884) 256GB 紫色 支持移动联通电信5G 双卡双待手机 Apple合约机 联通用户专享",},{id: '04',img: "https://img12.360buyimg.com/n7/jfs/t1/199896/15/21859/49376/62654138E671382d9/1bfd8c05b8809776.jpg",price: "2699.00",title: " xr 美版 全新已激活版 三网通店保单卡 iPhone ",},{id: '05',img: "https://img14.360buyimg.com/n7/jfs/t1/197505/24/13599/83205/616dc631E854d2563/e98b96e5044af9da.jpg",price: "14999.00",title: "Apple MacBook Pro 14英寸 M1 Pro芯片(8核中央处理器 14核图形处理器) 16G 512G 深空灰 ",},{id: '06',img: "https://img10.360buyimg.com/n7/jfs/t1/185310/31/28818/48997/6327c887Efa0f6a62/c43657632abdeb16.jpg",price: "12499.00",title: "Apple MacBook Air 13.6 8核M2芯片(8核图形处理器) 16G 512G 午夜色 ",},]

微信小程序wx:for遍历列表后点击不同列表跳转不同页面相关推荐

H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
微信小程序判断是否授权登录（未登录出现弹窗跳转登录页面）
目录 API 代码实现 API 获取用户当前设置 wx.getSetting:微信官方文档获取用户信息 wx.getUserInfo:微信官方文档微信小程序弹窗 wx.showToast:微信官方 ...
微信小程序foreach遍历_微信小程序wx:for和wx:for-item的用法
微信小程序wx:for和wx:for-item的用法.兴弘海科技在微信小程序定制开发单门店系统的时候,在制作菜单的时候,需要体现左侧是菜单栏目,右侧是菜单名称列表的时候,遇到wx:for和wx:for ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑如何使用第二个坑如何使用微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
微信小程序wx.downloadFile（）使用体验
微信小程序wx.downloadFile()使用体验想给单位做一个小程序,实现模板文件下载的功能,方便办事群众把文件下载到手机上自行打印填写,也能提高办事效率. 不过想法是好的,截止目前2018年1 ...
微信小程序充值及充值回调后的处理
微信小程序的充值流程与 H5 或公众号大致差不多,这里简单说一下前端在充值时候的一些操作流程. 用户在小程序中发起充值请求时,一般会先请求自己的服务器,将充值的参数发送给后端,然后后端会去请求微信充 ...
微信小程序wx.switchTab
[转]关于微信小程序wx.switchTab的问题昨天做了个功能要从首页跳到tabBar页,并且要带上参数.首先我是这样做的: 在index.js中: toCategory:function(eve ...
微信小程序-wx.createInnerAudioContext的方法执行多次问题
微信小程序-wx.createInnerAudioContext的方法执行多次问题在项目中用wx.createInnerAudioContext做语音播放这一块,测试的时候发现第一次播放的时候onP ...

微信小程序wx:for遍历列表后点击不同列表跳转不同页面

微信小程序wx:for遍历列表后点击不同列表跳转不同页面相关推荐

最新文章

热门文章