微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
需實(shí)現(xiàn)的功能:
點(diǎn)擊按鈕后,按鈕的顏色會(huì)加深
效果展示:
原按鈕
點(diǎn)擊后的按鈕
思路:
給按鈕設(shè)置一個(gè)點(diǎn)擊事件,點(diǎ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({ /*** 頁(yè)面的初始數(shù)據(jù)*/ data: { sty:0, score: '#fff5df', }, score: function (e) { //點(diǎn)擊按鈕,樣式改變 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; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序按鈕點(diǎn)擊動(dòng)畫(huà)效果的實(shí)現(xiàn)
- 微信小程序mpvue點(diǎn)擊按鈕獲取button值的方法
- 微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面詳解
- 微信小程序開(kāi)發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
- 微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能示例
- 微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能【附demo源碼下載】
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能【附demo源碼下載】
相關(guān)文章
技術(shù)男用來(lái)對(duì)妹子表白的百度首頁(yè)
這篇文章主要介紹了技術(shù)男用來(lái)對(duì)妹子表白的百度首頁(yè),非常有創(chuàng)意、有意思,需要的朋友可以參考下2014-07-07JavaScript中立即執(zhí)行函數(shù)實(shí)例詳解
javascript和其他編程語(yǔ)言相比比較隨意,所以javascript代碼中充滿各種奇葩的寫(xiě)法,有時(shí)霧里看花,當(dāng)然,能理解各型各色的寫(xiě)法也是對(duì)javascript語(yǔ)言特性更進(jìn)一步的深入理解。這篇文章主要給大家介紹了關(guān)于JavaScript中立即執(zhí)行函數(shù)的相關(guān)資料,需要的朋友可以參考下。2017-11-11javascript 判斷數(shù)組是否已包含了某個(gè)元素的函數(shù)
javascript判斷數(shù)組是否已包含了某個(gè)元素的js函數(shù),方便數(shù)組的判斷。2010-05-0512個(gè)非常實(shí)用的JavaScript小技巧【推薦】
下面小編就為大家?guī)?lái)一篇12個(gè)非常實(shí)用的JavaScript小技巧【推薦】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05javascript 多種搜索引擎集成的頁(yè)面實(shí)現(xiàn)代碼
這個(gè)頁(yè)面是為了方便自己同時(shí)使用多種搜索引擎(呵呵我用其作默認(rèn)主頁(yè)),在IE5/IE6/FireFox下均運(yùn)行正常,效果如下圖2010-01-01如何快速高效創(chuàng)建JavaScript 二維數(shù)組方法詳解
這篇文章主要為大家介紹了如何快速高效創(chuàng)建JavaScript 二維數(shù)組方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02詳解JavaScript數(shù)組reduce()方法的高級(jí)技巧
reduce()?是?JavaScript?中一個(gè)很有用的數(shù)組方法,這篇文章主要介紹了JavaScript中reduce()方法的高級(jí)技巧,感興趣的小伙伴可以了解一下2023-03-03