初学小程序问题一(关于小程序中for循环列表后点击不同列表跳转不同页面)

直接上代码
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了
`)}
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值