微信小程序点击获取页面循环列表的数据
程序员文章站
2022-07-12 08:12:59
...
最近接触了小程序,和以前的一些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,
})
}
},
推荐阅读
-
微信小程序地图(map)组件点击(tap)获取经纬度的方法
-
微信小程序授权 获取用户的openid和session_key【后端使用java语言编写】,我写的是get方式,目的是测试能否获取到微信服务器中的数据,后期我会写上post请求方式。
-
微信小程序 获取javascript 里的数据
-
微信小程序使用form表单获取输入框数据的实例代码
-
微信小程序实现页面跳转传值以及获取值的方法分析
-
解决微信小程序云开发中获取数据库的内容为空的方法
-
微信小程序的注册页面包含倒计时验证码、获取用户信息
-
微信小程序开发第三篇 数据绑定,点击事件,数组循环
-
微信小程序点击获取页面循环列表的数据
-
微信小程序多列表渲染数据开关互不影响的实现