微信小程序 動(dòng)態(tài)綁定事件并實(shí)現(xiàn)事件修改樣式
更新時(shí)間:2017年04月13日 15:59:58 作者:xiaochun365
這篇文章主要介紹了微信小程序 動(dòng)態(tài)綁定事件并實(shí)現(xiàn)事件修改樣式的相關(guān)資料,需要的朋友可以參考下
微信小程序 動(dòng)態(tài)綁定事件并實(shí)現(xiàn)事件修改樣式
實(shí)例代碼
wxml
<scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}"> <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}"> <text type="primary" style="width:{{itemWidth}}rpx;" bindtap="bind{{item.id}}" data-typeid="{{item.id}}" class="{{currentId==item.id?'clickSel':'removeSel'}}">{{item.name}}</text> </block> </scroll-view>
js
var reportTypeList = [ { name: "日?qǐng)?bào)1", id: "1" }, { name: "目錄2", id: "2" }, { name: "季報(bào)3", id: "3" }, { name: "月報(bào)4", id: "4" }, { name: "日?qǐng)?bào)5", id: "5" }, { name: "目錄6", id: "6" }, { name: "季報(bào)7", id: "7" }, { name: "月報(bào)8", id: "8" }, { name: "日?qǐng)?bào)9", id: "9" }, { name: "目錄10", id: "10" }, { name: "季報(bào)11", id: "11" }, { name: "月報(bào)12", id: "12" }] var pageObject = { data: { reportTypeList: reportTypeList, num: 0, toLeftNum: 0, itemWidth: 150 } } for (var i = 0; i < reportTypeList.length; i++) { (function (item) { pageObject['bind' + item.id] = function (e) { var id = parseInt(e.currentTarget.dataset.typeid) this.setData({ currentId: id }) } })(reportTypeList[i]) } Page(pageObject)
wxss
/**index.wxss**/ .reportTypeScroll { margin: 40px 0px 20px 0px; white-space: nowrap; display: flex; } .clickSel { color: red; } .removeSel { color: black; } text { height: 150rpx; display: inline-block; text-align: center; }
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
詳解微信小程序如何實(shí)現(xiàn)類似ChatGPT的流式傳輸
這篇文章主要為大家介紹了微信小程序如何實(shí)現(xiàn)類似ChatGPT的流式傳輸示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03JS網(wǎng)頁repaint與reflow?的區(qū)別及優(yōu)化方式
這篇文章主要為大家介紹了JS網(wǎng)頁repaint與reflow?的區(qū)別及優(yōu)化方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Project?Reference優(yōu)化TypeScript編譯性能示例
這篇文章主要為大家介紹了Project?Reference優(yōu)化TypeScript編譯性能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08詳解如何使用mock.js實(shí)現(xiàn)接口測(cè)試的自動(dòng)化
這篇文章主要為大家介紹了如何使用mock.js實(shí)現(xiàn)接口測(cè)試的自動(dòng)化詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06JavaScript深拷貝方法structuredClone使用
這篇文章主要為大家介紹了JavaScript深拷貝方法structuredClone使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02