您好,登錄后才能下訂單哦!
微信小程序 動(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" 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ì)本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。