您的位置：首页 > 移动开发 > 微信开发

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

2018-01-18 16:14 706 查看

一：for循环，绑定点击事件

分享者：niedongdong，原文地址 
最近公司有小程序的项目，本人有幸参与其中，一个项目做下来感觉受益匪浅，与大家做下分享，欢迎沟通交流互相学习。先说一下此次项目本人体会较深的几个关键点：微信地图、用户静默授权、用户弹窗授权、微信充值等等。言归正传，今天分享我遇到的关于wx:for循环绑定数据的一个tips：想必大家的都知道wx:for，如下就不用我啰嗦了：
<view class="myNew" wx:for="{{list}}">{{item.title}}<view>{{item.content}}</view></view>    (item即为数组list的每一个子元素)

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


{ "id" : 01 ,


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


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


{  "id" : 02 ,


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


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


{ "id" : 03 ,


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


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


]

上面的例子变成如下：
<view class="myNew" wx:for="{{list}}">{{item.title}}<view bindtap="readDetail"
10628
>{{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 //传参跳转即可

        })


})

二：一些开发小程序时，遇到的问题
分享者：Mr.方，原文地址 
1、JS不能操作css，那么怎么动态添加css呢？答：通过操作item？的true或false，来加入class 例如：2、微信的尺寸rpx?答：以设计稿750px为准，在设计稿上量出多少，就是多少，微信会自动给你适配3、微信小程序api里没有modal?事实上，其实有modal的组件，而且很好用。链接http://www.cnblogs.com/liululin/p/6001437.html4、小程序中的scroll-view组件不能和textarea一起用，自己写的类似scroll-view组件（overflow-y：auto）也不能一起使用，使用的话，textarea的提示文字和光标会飘，根本无法使用。另外textarea，也不能display：none，最好的方法是用条件判断去控制它wx:if="{{show}}"
三：二维数组列表渲染
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>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航