微信小程序項目總結(jié)：for循環(huán)，綁定點擊事件，二維數(shù)組列表渲染 ...
一：for循環(huán)，綁定點擊事件
分享者：larry6，原文地址
最近公司有小程序的項目，本人有幸參與其中，一個項目做下來感覺受益匪淺，與大家做下分享，歡迎溝通交流互相學(xué)習(xí)。
先說一下此次項目本人體會較深的幾個關(guān)鍵點：微信地圖、用戶靜默授權(quán)、用戶彈窗授權(quán)、微信充值等等。
言歸正傳，今天分享我遇到的關(guān)于wx:for循環(huán)綁定數(shù)據(jù)的一個tips：
想必大家的都知道wx:for，如下就不用我啰嗦了：
- <view class="myNew" wx:for="{{list}}">{{item.title}}<view>{{item.content}}</view></view> (item即為數(shù)組list的每一個子元素)
但是，如果循環(huán)體內(nèi)綁定一個點擊事件，點擊時如何把子元素的內(nèi)容傳進來呢？ 如下：
- list:[
- { "id" : 01 ,
- "title" : "第一個標題",
- "content":"第一個內(nèi)容"},
- { "id" : 02 ,
- "title" : "第二個標題",
- "content":"第二個內(nèi)容"},
- { "id" : 03 ,
- "title" : "第三個標題",
- "content":"第三個內(nèi)容"}
- ]
上面的例子變成如下：
- <view class="myNew" wx:for="{{list}}">{{item.title}}<view bindtap="readDetail">{{item.content}}</view></view>
需要觸發(fā)readDetail事件時，取到對應(yīng)的id調(diào)接口查看詳情。
可是小程序又不允許事件名后直接注入id參數(shù)。
其實，小程序早就想到這一點了，提供了一個 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; //打印可以看到，此處已獲取到了對應(yīng)的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 //傳參跳轉(zhuǎn)即可
- })
- })
二：一些開發(fā)小程序時，遇到的問題
分享者：Mr.方，原文地址 1、JS不能操作css，那么怎么動態(tài)添加css呢？
答：通過操作item？的true或false，來加入class 例如：
2、微信的尺寸rpx?
答：以設(shè)計稿750px為準，在設(shè)計稿上量出多少，就是多少，微信會自動給你適配
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}}"
三：二維數(shù)組列表渲染
- 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>
