小程式實踐(五):for迴圈綁定item的點擊事件

来源:https://www.cnblogs.com/xqxacm/archive/2018/07/12/9298454.html
-Advertisement-
Play Games

微信展示列表效果藉助於 wx:for 簡單寫一個列表(wxml文件中): 對應的數據源(js文件中): 寫一個點擊監聽: 效果: 以上、可以實現列表的item點擊效果,但是無法到點擊的item對應的數據源數據 解決方法: 給有點擊事件的組件添加一個 data-any 屬性 any可以是任意數據類型。 ...


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

 

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

  

 

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

  

寫一個點擊監聽:

  

 

效果:

  

 

 

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

 

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

 

解決方法:

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

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

  

 

 然後修改點擊事件:

  

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

   控制台列印信息:

  

 

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

 

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

 

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

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

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

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

小程式實踐(五):for迴圈綁定item的點擊事件

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 0. 事件與事件流 事件是瀏覽器與文檔交互的瞬間,如點擊按鈕、填寫表格等操作,它是Javascript與HTML之間溝通的橋梁。DOM是樹狀結構,如果同時給父節點都綁定事件時,當觸發子節點的時候,這兩個事件的發生順序就牽涉到事件流的內容,它描述的是頁面接受時間的順序。事件流描述的是從頁面接收事件的順 ...
  • 在網路載入緩慢或者刷新的時候總會有那麼一瞬間出現vue的模板代碼,實在很影響美觀,對於我這種有強迫症的人來說實在是忍無可忍,後來經過查找資料,終於發現瞭解決方法,可以使用vue現成的指令來解決這個問題:v-cloak 首先在css中加入: 然後需要在元素加上: 這樣,v-cloak所在元素下的變數在 ...
  • HTML介紹 Web服務本質 瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返迴響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面 HTML是什麼? 超文本標記語言(Hypertext Markup Language, HTML)是一種用於創建網頁的 ...
  • 一個div同時設置background-color和background-image的話,color是處於img層下方的,無法實現遮罩效果,所以需要再創建一個div作為其子div,然後設置子div的背景顏色,介紹兩種方法: 第一種,代碼如下: 第二種,通過after偽元素設置,代碼如下: 借鑒文章出 ...
  • 我通常上網使用兩個瀏覽器,safari用於一般上網;Chrome安裝SwitchyOmega插件,在不同的代理中切換,來保證某些網站的上網速度。 但是這種方式到了手機上就有點懵,幾乎所有的iPhone瀏覽器都不支持代理的自動切換和設置,所以只能選一個相對相容性比較好的網路方式一直用下去。很不爽利。。 ...
  • 一、對象 1.字面量創建對象 2.數據描述和存取描述設置 3.get和set 4.數據描述和存取描述檢查 二、prototype 1.prototype釋義 2.prototype與__proto__ 3.prototype之共用性 4.prototype之繼承性 三、類 1.類的封裝 1.混合的構 ...
  • 技術交流群:821039247 安裝node config模塊 在config文件夾下麵創建 文件,這是環境配置的預設的文件,如果沒有別的配置,則為預設這裡配置。如果要設置自己的環境配置文件,可以直接新建 ,如dev環境 即可,然後在 裡面配置相關啟動設置,載入對應環境文件即可。 在 裡面編輯如下內 ...
  • 因為是新入門antd-pro這個的小白,所以在mock數據和伺服器數據切換這裡搞了將近2天才弄好,配置如下,供各位初學者參考,如有錯誤的地方,請大神指出~叩謝!! 下麵開始乾貨: 1、.roadhogrc.mock.js這個文件沒有任何修改。 2、.webpackrc.js 文件中添加proxy,如 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...