微信小程序實現(xiàn)點擊按鈕后修改顏色
這篇文章主要介紹了微信小程序實現(xiàn)點擊按鈕后修改顏色,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
需實現(xiàn)的功能:
點擊按鈕后,按鈕的顏色會加深
效果展示:
原按鈕
點擊后的按鈕
思路:
給按鈕設置一個點擊事件,點擊了按鈕后,修改按鈕的樣式。
代碼:
test.wxml文件
<view wx:if="{{sty==0}}"> <view class="score" style="background-color:{{score}};" catchtap='score'> <text>按鈕一</text> </view> </view> <view wx:if="{{sty==1}}"> <view class="score" style="background-color:{{score}};" catchtap='score'> <text>按鈕一</text> </view> </view>
test.js文件
Page({ /*** 頁面的初始數(shù)據(jù)*/ data: { sty:0, score: '#fff5df', }, score: function (e) { //點擊按鈕,樣式改變 let that = this; that.setData({ sty: 1, score: 'rgba(252,178,22, 0.3)' }); }, )}
test.css文件
.score{ width:335rpx; border-radius:10rpx 0rpx 0rpx 10rpx; } .score text{ color: #FCB216; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript中立即執(zhí)行函數(shù)實例詳解
javascript和其他編程語言相比比較隨意,所以javascript代碼中充滿各種奇葩的寫法,有時霧里看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關于JavaScript中立即執(zhí)行函數(shù)的相關資料,需要的朋友可以參考下。2017-11-11javascript 判斷數(shù)組是否已包含了某個元素的函數(shù)
javascript判斷數(shù)組是否已包含了某個元素的js函數(shù),方便數(shù)組的判斷。2010-05-05javascript 多種搜索引擎集成的頁面實現(xiàn)代碼
這個頁面是為了方便自己同時使用多種搜索引擎(呵呵我用其作默認主頁),在IE5/IE6/FireFox下均運行正常,效果如下圖2010-01-01如何快速高效創(chuàng)建JavaScript 二維數(shù)組方法詳解
這篇文章主要為大家介紹了如何快速高效創(chuàng)建JavaScript 二維數(shù)組方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02詳解JavaScript數(shù)組reduce()方法的高級技巧
reduce()?是?JavaScript?中一個很有用的數(shù)組方法,這篇文章主要介紹了JavaScript中reduce()方法的高級技巧,感興趣的小伙伴可以了解一下2023-03-03