用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序项目总结:for循环,绑定点击事件,二维数组列表渲染 ... ...

纸飞机 2018-3-8 09:38

一:for循环,绑定点击事件分享者:larry6,原文地址 最近公司有的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习。先说一下此次项目本人体会较深的几个关键点:微信地 ...

一:for循环,绑定点击事件

分享者:larry6,

原文地址


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

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

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

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

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

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

  1. list:[
  2. { "id" : 01 ,
  3. "title" : "第一个标题",
  4. "content":"第一个内容"},
  5. { "id" : 02 ,
  6. "title" : "第二个标题",
  7. "content":"第二个内容"},
  8. { "id" : 03 ,
  9. "title" : "第三个标题",
  10. "content":"第三个内容"}
  11. ]

上面的例子变成如下:

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

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

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

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

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

可以写成如下:

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

js文件:

  1. readArticle:function(e){
  2. var $id = e.currentTarget.dataset.id; //打印可以看到,此处已获取到了对应的id
  3. })

同理:也可以写成如下:

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

js中:

  1. readArticle:function(e){
  2. var $data = e.currentTarget.dataset; //打印可以看到,此处已获取到了包含id、title、和content的对象
  3. wx.navigateTo({
  4. url: '../myNewsInfo/myNewsInfo?id'+$data.id+"&title="+$data.title+"&content="+$data.content //传参跳转即可
  5. })
  6. })

二:一些开发小程序时,遇到的问题

分享者:Mr.方,

原文地址


1、JS不能操作css,那么怎么动态添加css呢?

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

2、微信的尺寸rpx?

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

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

事实上,其实有modal的组件,而且很好用。链接

http://www.cnblogs.com/liululin/p/6001437.html

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

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

三:二维数组列表渲染

  1. Page({ mapData:[ [{id:11},{id:12}], [{id:21},{id:22}], [{id:31},{id:32},{id:33}] ] })
  1. class="container"> class="map"> wx:for="{{mapData}}"> wx:for="{{item}}"> {{item.id}}
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏