微信小程式實現點擊按鈕修改字體顏色功能
Dec 06, 2017 am 09:19 AM
修改
小程式
按鈕
之前介紹過很多關於微信小程式的內容,本文我們接著給大家分享微信小程式實作點擊按鈕修改字體顏色功能,涉及微信小程式wx:for循環讀取data數值及事件綁定修改元素屬性相關操作技巧,需要的朋友可以參考下。
本文實例講述了微信小程式實作點擊按鈕修改字體顏色功能。分享給大家供大家參考,具體如下:
1、效果展示
2、關鍵程式碼
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}} "
綁定事件動態修改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)
登入後複製
以上內容就是微信小程式實作點擊按鈕修改字體顏色功能的小案例,希望能幫助到大家。
相關推薦:
####微信小程式視頻,音樂,圖片元件詳解####### #####總結有關小程式開發的經驗######以上是微信小程式實現點擊按鈕修改字體顏色功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)