直接上代码
wxml:
<view class='listBox'>
<view class="list" wx:for="{{userInfo}}" bindtap='changBtn' data-id="{{item.id}}">
<image src="{{item.iconUrl}}"></image>
<text>{{item.title}}</text>
</view>
</view>
说明:userInfo:数组的名字(数组当前项的变量名默认为 item,所以使用 item.XXX)
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
js:
const app = getApp()
Page({
data: {
tarbar:{},
userImg: '../../img/user/icon_1.jpg',
title: 'Simple',
number1: 12,
number2: 245,
userInfo: [
{
id: '01',
iconUrl: '../../img/user/买到管理@2x.png',
title: '买到管理'
},
{
id: '02',
iconUrl: '../../img/user/卖出@2x.png',
title: '卖出管理'
},
{
id: '03',
iconUrl: '../../img/user/收藏@2x.png',
title: '我的收藏'
},
{
id: '04',
iconUrl: '../../img/user/发布的商品@2x.png',
title: '我发布的商品'
},
{
id: '05',
iconUrl: '../../img/user/xxdpi求购.png',
title: '我的求购需求'
},
{
id: '06',
iconUrl: '../../img/user/xxdpi求购.png',
title: '邀请好友'
},
{
id: '07',
iconUrl: '../../img/user/xxdpi消息.png',
title: '消息'
},
{
id: '08',
iconUrl: '../../img/user/收货地址@2x.png',
title: '收货地址'
},
{
id: '09',
iconUrl: '../../img/user/用户协议@2x.png',
title: '国酒城商家协议'
},
{
id: '10',
iconUrl: '../../img/user/分享@2x.png ',
title: '分享国酒城给好友'
}
]
},
user:function(){
wx.navigateTo({
url: '../businessdetails/businessdetails'
})
},
changBtn:function(e){
var $id = e.currentTarget.dataset.id;
console.log($id)
if ("01"== $id){
wx.navigateTo({
url: '../orderlist/orderlist',
})
}
if ("02" == $id) {
wx.navigateTo({
url: '../howsell/howsell',
})
}
..............根据上面的ID依次类推 后面只需要改变ID和URL
说明:e.currentTarget 代表的是,注册了监听点击事件的组件
dataset 对应 data- 开头的属性(data-id ==dataset.id )
这样e.currentTarget.dataset.id就可以获取到你点击时的ID了
`)}
初学小程序问题一(关于小程序中for循环列表后点击不同列表跳转不同页面)
最新推荐文章于 2022-10-14 15:10:35 发布