首页 > 代码库 > 微信小程序学习总结(2)------- 之for循环,绑定点击事件

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习。

先说一下此次项目本人体会较深的几个关键点:微信地图、用户静默授权、用户弹窗授权、微信充值等等。

言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:

 1. 想必大家的都知道wx:for,如下就不用我啰嗦了:

 <view class="myNew" wx:for="{{list}}">{{item.title}}<view>{{item.content}}</view></view>    (item即为数组list的每一个子元素)

 2. 但是,如果循环体内绑定一个点击事件,点击时如何把子元素的内容传进来呢? 如下:

 list:[

  { "id" : 01 ,

     "title" : "第一个标题",

     "content":"第一个内容"},

{  "id" : 02 ,

     "title" : "第二个标题",

     "content":"第二个内容"},

{ "id" : 03 ,

     "title" : "第三个标题",

     "content":"第三个内容"}

]

上面的例子变成如下:

<view class="myNew" wx:for="{{list}}">{{item.title}}<view bindtap="readDetail">{{item.content}}</view></view>

需要触发readDetail事件时,取到对应的id调接口查看详情。

可是小程序又不允许事件名后直接注入id参数。

其实,小程序早就想到这一点了,提供了一个 data-any (any任意类型) 方法,此处有借鉴H5中 data- 任意属性的妙处。

(小程序给出了示例: data-index,大家可以自行研究。)

可以写成如下:

<view class="myNew" wx:for="{{list}}">{{item.title}}<view bindtap="readDetail" data-id="{{item.id}}">{{item.content}}</view></view>

js文件:

     readArticle:function(e){

            var $id = e.currentTarget.dataset.id; //打印可以看到,此处已获取到了对应的id           

   })

 

同理:也可以写成如下:

<view class="myNew" wx:for="{{list}}">{{item.title}}<view bindtap="readDetail" data-id="{{item.id}}" data-title="{{item.title}}" data-content="{{item.content}}">{{item.content}}</view></view>

js中:

readArticle:function(e){

            var $data = e.currentTarget.dataset; //打印可以看到,此处已获取到了包含id、title、和content的对象

wx.navigateTo({
                  url: ‘../myNewsInfo/myNewsInfo?id‘+$data.id+"&title="+$data.title+"&content="+$data.content //传参跳转即可
           })

})

 

微信小程序学习总结(2)------- 之for循环,绑定点击事件