微信展示列表效果借助于 wx:for?
通常我們在靜態(tài)創(chuàng)建一個view或是button碟贾,他對應的點擊事件很簡單
我的頁面實例圖
.wxml文件代碼示例:
紅框里的都是每個view,對應綁定的點擊方法名字嚎货,接下來,我們在.js文件中分別來實現(xiàn)這些對應的點擊方法
那以上是靜態(tài)實現(xiàn)點擊事件焕蹄,那列表的時候如何實現(xiàn)動態(tài)觸發(fā)點擊事件呢缤骨?
動態(tài)觸發(fā)點擊事件
給有點擊事件的組件添加一個 data-any 屬性磁玉,any可以是任意數(shù)據(jù)類型苛坚,any的名稱可以自己任意定義
這里有一個例子:
.wxml文件代碼:
這里的data-any,雙引號里的值胯究,
item:表示對象全部的值
item.xx:表示數(shù)組中某一個對象當中對應的某個數(shù)據(jù)
index:表示數(shù)組下標
.js文件代碼
在if(indf==0)這里稍计,因為.wxml文件中,定義的是index下標裕循,那如果改成item臣嚣,就可以寫成
if(indf.title=="全部訂單"),或者if(indf.index ==0)這樣
效果圖如下:
這里剥哑,在額外的講一下.js文件代碼圖片中硅则,定義接收.wxml組件data中數(shù)據(jù)
var id = e.currentTarget.dataset.pid;
var indf = e.currentTarget.dataset.indd;
這里說一下.currentTarget和.target區(qū)別
e.currentTarget:指的是注冊了事件監(jiān)聽器的對象
e.target:指的是該對象里的子對象,也是觸發(fā)這個事件的對象