小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我有一个问题不太懂 通过调用接口 然后获取到里面的东西填上去,这个我懂。但是就是如果有两条 三条 多条这样的,里面的参数都是变量 是可以变换的。但是html里面只有一个呀,这怎么实现展示多条数据?
就像这个样子。是不是用wx:for循环代替里面的内容 就可以多行使用那些标签??但是就是 就算是我用循环写出来了 还有个点击进去详情查看 肯定是要绑点击事件的。。。我这个循环的内容要怎么绑点击事件??
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
添加点击事件
传入id
处理id
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
简单说下吧~我就直接上代码了
循环的东西 每个都有一个index,并且有我们自定义的Id等(这里以detailId)举例
数组格式:list: [{detailId: 10000, title: '我是第一个'},{detailId: 10001, title: '我是第二个'}]
wxml:
<view wx:for="{{list}}" wx:key="{{index}}" data-id="{{item.detailId}}" bindtap="handleClick">{{item.title}}</view>
//需要注意 data-xxx 建议小写,比如:data-detailId 。在这里大写,在js里就是小写 detailid
js:
handleClick(e) { console.log(e) //这里拿到view上使用data-xx绑定的key名 const id = e.currentTarget.dataset.id wx.navigateTo({ url: `/pages/detail/detail?detailId=${id}` }) }
上面格式乱的,我就截图了。
就按照常规的绑定事件呀,事件名都一样,跳转到相应的详情时带不同的参数(比如当前项的id),带过去 你的详情是根据这个id显示与之对应的内容
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
添加点击事件
传入id
处理id
简单说下吧~我就直接上代码了
循环的东西 每个都有一个index,并且有我们自定义的Id等(这里以detailId)举例
数组格式:list: [{detailId: 10000, title: '我是第一个'},{detailId: 10001, title: '我是第二个'}]
wxml:
<view wx:for="{{list}}" wx:key="{{index}}" data-id="{{item.detailId}}" bindtap="handleClick">{{item.title}}</view>
//需要注意 data-xxx 建议小写,比如:data-detailId 。在这里大写,在js里就是小写 detailid
js:
handleClick(e) { console.log(e) //这里拿到view上使用data-xx绑定的key名 const id = e.currentTarget.dataset.id wx.navigateTo({ url: `/pages/detail/detail?detailId=${id}` }) }
上面格式乱的,我就截图了。
就按照常规的绑定事件呀,事件名都一样,跳转到相应的详情时带不同的参数(比如当前项的id),带过去 你的详情是根据这个id显示与之对应的内容