小程序實踐(五):for循環綁定item的點擊事件


微信展示列表效果借助於 wx:for 

 

簡單寫一個列表(wxml文件中):

  

 

對應的數據源(js文件中):

  

寫一個點擊監聽:

  

 

效果:

  

 

 

以上、可以實現列表的item點擊效果,但是無法到點擊的item對應的數據源數據

 

---------------------------------------------------------------------------------------------------

 

解決方法:

給有點擊事件的組件添加一個 data-any  屬性 any可以是任意數據類型。

從下圖可以看出我們遍歷expertData數組,每一個item 定義為info, 在第二行最后 加了一句  data-bean="{{info}}"

  

 

 然后修改點擊事件:

  

 發現可以用此方法去除點擊的item對應的數據對象,以及該對象中某個屬性值 

   控制台打印信息:

  

 

 這樣就可以獲取到列表展示數據中某一個item對應的數據了。

 

 

 

--------------------------------------------------------------------------------------

 

小程序實踐(一):主頁tab選項實現

小程序實踐(二):swiper組件實現輪播圖效果

小程序實踐(三):九宮格實現及item跳轉

小程序實踐(四):動態控制組件的顯示/隱藏

小程序實踐(五):for循環綁定item的點擊事件

小程序實踐(六):view內部組件排版

小程序實踐(七):頁面間傳值

小程序實踐(八):驗證碼倒計時功能

小程序實踐(九):返回到上一個界面並傳值回去

小程序實踐(十):textarea實現簡單的編輯文本界面

小程序實踐(十一):showModal的使用

小程序實踐(十二):七牛雲上傳圖片

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM