這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能,涉及微信小程序wx:for循環(huán)讀取data數(shù)值及事件綁定修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
index.wxml文件
<view class="view" style="color:{{color}}">我是view標(biāo)簽</view>
<view style="display:flex;">
<block wx:for="{{colorArray}}" wx:key="" wx:for-item="Color">
<button class="btn" style="background:{{Color}};" type="default" bindtap="bindtap{{index}}"></button>
</block>
</view>
登錄后復(fù)制
這里使用bindtap=”bindtap{{index}}”綁定事件動態(tài)修改style=”color:{{color}}”中的顏色值。
index.js文件
var pageData={}
pageData.data={
color:'black',
colorArray:['red','blue','yellow','green','black']
}
for(var i=0;i<5;++i){
(function(index){
pageData['bindtap'+index]=function(e){
this.setData({
color:this.data.colorArray[index]
})
}
})(i)
}
Page(pageData)
登錄后復(fù)制
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色的功能的詳細(xì)內(nèi)容，更多請關(guān)注有卡有網(wǎng)。
