微信小程序> 微信小程序点击获取页面循环列表的数据

微信小程序点击获取页面循环列表的数据

浏览量:633 时间: 来源:谢同学谢童鞋

最近接触了小程序,和以前的一些js的框架不一样的是,当页面绑定一个方法时,这里不会带参数,如下所示:

view class="page"    view class="page__bd"        view class="weui-grids"            block wx:for="{{list}}"                navigator wx:if="{{item.parentId!=1}}" class="weui-grid" hover-class="weui-grid_active"                 url="" bindtap='navigateToPage' id='{{item.id}}' data-name='{{item.name}}' data-showType='{{item.showType}}'                    image class="weui-grid__icon" src="{{url}}{{item.image}}" /                    view class="weui-grid__label"{{item.name}}/view                /navigator             /block        /view    /view/view

这里使用了一个for循环:wx:for循环一个列表,绑定了一个方法叫navigateToPage,展示为九宫格的形式:

这里使用navigator url=""navigator的形式,本来如果这些图片都是跳转到一个页面的话,只要url的参数不一致就可以了。

但是这里需要判断每张图片的类型,从而点击之后跳转到不一样的界面,需要在navigateToPage方法中取到每张图片的名称和类型值,这时候需要给每一项设置一个data-**属性,星号部分自定义名称即可 :
我这里需要元素的坐标 data-name='{{item.name}}'     data-showType='{{item.showType}}'
这样在点击的时候就可以通过获取 e.currentTarget.dataset.name 来获取到name的值了 
代码如下:

 navigateToPage:function(e){    var id = e.currentTarget.id    var name = e.currentTarget.dataset.name    var showType = e.currentTarget.dataset.showtype    console.log(showType)    if (showType=='1'){      wx.navigateTo({        url: '../userForm/userForm?id='+id+'&name='+name ,      })     }    else if (showType == 'pass'){      wx.navigateTo({        url: '../userPass/userPass',      })    }else{      wx.navigateTo({        url: '../userList/userList?id=' + id + '&name=' + name+'&showType='+showType,      })    }  },

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎