微信小程序?qū)崿F(xiàn)點擊按鈕修改字體顏色功能【附demo源碼下載】
更新時間：2017年12月05日 15:49:51 作者：FutrueJet
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕修改字體顏色功能,涉及微信小程序wx:for循環(huán)讀取data數(shù)值及事件綁定修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(xiàn)點擊按鈕修改字體顏色功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
index.wxml文件
<view class="view" style="color:{{color}}">我是view標簽</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}}"綁定事件動態(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、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
在js里怎么實現(xiàn)Xcode里的callFuncN方法(詳解)
下面小編就為大家?guī)硪黄趈s里怎么實現(xiàn)Xcode里的callFuncN方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了js編寫簡單的計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript事件學(xué)習(xí)小結(jié)（一）事件流
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)（一）事件流的相關(guān)資料,需要的朋友可以參考下2016-06-06
Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果
這篇文章主要介紹了Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件
這篇文章主要介紹了使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件。需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JS鼠標事件大全 推薦收藏，整理的比較細，推薦大家看下。2011-11-11
這篇文章主要為大家詳細介紹了d3.js實現(xiàn)圖形縮放平移效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
深入理解JavaScript系列（14） 作用域鏈介紹(Scope Chain)
在第12章關(guān)于變量對象的描述中，我們已經(jīng)知道一個執(zhí)行上下文 的數(shù)據(jù)（變量、函數(shù)聲明和函數(shù)的形參）作為屬性存儲在變量對象中2012-04-04
這篇文章主要介紹了JavaScript使用Replace進行字符串替換的方法,涉及Replace進行一次替換與全部替換的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04