微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能【附demo源碼下載】
本文實(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>
這里使用bindtap="bindtap{{index}}"
綁定事件動(dòng)態(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)
3、源代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
在js里怎么實(shí)現(xiàn)Xcode里的callFuncN方法(詳解)
下面小編就為大家?guī)?lái)一篇在js里怎么實(shí)現(xiàn)Xcode里的callFuncN方法(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11js編寫(xiě)簡(jiǎn)單的計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了js編寫(xiě)簡(jiǎn)單的計(jì)時(shí)器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JavaScript事件學(xué)習(xí)小結(jié)(一)事件流
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(一)事件流的相關(guān)資料,需要的朋友可以參考下2016-06-06Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果
這篇文章主要介紹了Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件
這篇文章主要介紹了使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03深入理解JavaScript系列(14) 作用域鏈介紹(Scope Chain)
在第12章關(guān)于變量對(duì)象的描述中,我們已經(jīng)知道一個(gè)執(zhí)行上下文 的數(shù)據(jù)(變量、函數(shù)聲明和函數(shù)的形參)作為屬性存儲(chǔ)在變量對(duì)象中2012-04-04JavaScript使用Replace進(jìn)行字符串替換的方法
這篇文章主要介紹了JavaScript使用Replace進(jìn)行字符串替換的方法,涉及Replace進(jìn)行一次替換與全部替換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04