列表取值
任何一个APP,WEB都不会缺少列表的动态生成。所以微信小程序也不列外,官网上有微信动态生成的代码。但仅仅动态生成还不足以开发项目。下面我来告诉大家如何获取单击的列表的值,并且传入下一个界面。
生成动态列表的代码:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
动态取得列表的值可以自定义一个属性 data-itemnum={{item}},将属性添加到标签里面即可,代码如下:
<view data-itemnum={{item}} > {{item}} </view>
再给这个视图绑定一个单机方法,代码如下:
<view data-itemnum="{{item}}" bindtap="itemClick"> {{item}} </view>
再单击方法itemClick中获取列表中的值,代码如下:
itemClick:function(e){
console.log('单击',e.currentTarget.dataset.itemnum);
}
上面打印出来的就是你需要的值data-itemnum这种可以定义很多个。但要保持data-**这种格式.
这种用列表的ID来获取详情数据用的特别多。在一个就是把列表中获取的数据出入到下一个界面。通常是详情页,方法有很多。如存入缓存,拼在URL后面,这次讲解的是URL后面拼值与取值。
列表传值
还是用上面的方法itemClick,只不过要加上微信封装的打开页面方法。代码如下:
itemClick:function(e){
console.log('单击',e.currentTarget.dataset.itemnum);
var name=e.currentTarget.dataset.itemnum
wx.navigateTo({
url: 'name/name?name='+name//这是我建立的另一个界面,你们别忘了在app.json里面加路径哦
});
}
name界面获取上个界面传值的代码如下:
onLoad:function(options){//onLoad是页面加载事件已进入就会自动加载一次
console.log(options.name);
}
欢迎大家关注我的公众号吵吵日记: