微信小程序项目总结: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 //传参跳转即可
           })

})

3. 二维数组列表渲染

Page({ mapData:[ [{id:11},{id:12}], [{id:21},{id:22}], [{id:31},{id:32},{id:33}] ] })
<view class="container"> <view class="map"> <view wx:for="{{mapData}}"> <view wx:for="{{item}}"> {{item.id}} </view> </view> </view> </view>

4. 一些开发小程序时,遇到的问题
4-1、JS不能操作css,那么怎么动态添加css呢?

答:通过操作item?的true或false,来加入class 例如:

4-2、微信的尺寸rpx?

答:以设计稿750px为准,在设计稿上量出多少,就是多少,微信会自动给你适配

4-3、微信小程序api里没有modal?

事实上,其实有modal的组件,而且很好用。链接http://www.cnblogs.com/liululin/p/6001437.html

4-4、小程序中的scroll-view组件不能和textarea一起用,自己写的类似scroll-view组件(overflow-y:auto)也不能一起使用,使用的话,textarea的提示文字和光标会飘,根本无法使用。另外textarea,也不能display:none,最好的方法是

用条件判断去控制它wx:if="{{show}}"

5. 百度地图微信小程序API简单配置步骤

   1.申请秘钥(需要小程序appID)

   2.下载百度地图并放入项目(http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download)

   3.设置请求合法域名:

(登录微信公众平台-> "设置" -> "开发设置" -> "request 合法域名" ->添加 api.map.baidu.com -> 点击"保存并提交"。)

   4. js文件中引入百度地图微信小程序JSAPI模块

    例:var bmap = require('../../libs/bmap-wx.js'); 

最后为了方便大家的沟通与交流请加QQ群: 625787746

请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140

  • 3
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT博客技术分享

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值