微信小程序?qū)崿F(xiàn)點擊按鈕后修改顏色
更新時間：2019年12月05日 10:49:12 作者：故事外的人呀
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕后修改顏色,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕后修改顏色,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下
需實現(xiàn)的功能：
點擊按鈕后，按鈕的顏色會加深
效果展示：
原按鈕
點擊后的按鈕
思路：
給按鈕設(shè)置一個點擊事件，點擊了按鈕后，修改按鈕的樣式。
代碼：
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;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
可能是全網(wǎng)最詳細小程序中使用echarts的教程
在開發(fā)微信小程序時,有需求需要使用到柱狀圖,餅圖等圖表,下面這篇文章主要給大家介紹了關(guān)于小程序中使用echarts的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
本文主要介紹了JS實現(xiàn)復(fù)制功能的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
javascript實現(xiàn)的時間格式加8小時功能示例
這篇文章主要介紹了javascript實現(xiàn)的時間格式加8小時功能,涉及javascript日期時間轉(zhuǎn)換與運算相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JavaScript代碼實現(xiàn)空位補零2010-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)中國象棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
webpack學(xué)習--webpack經(jīng)典7分鐘入門教程
這篇文章主要介紹了webpack學(xué)習--webpack經(jīng)典7分鐘入門教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
下面小編就為大家?guī)硪黄狫S之獲取樣式的簡單實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
下面小編就為大家分享一篇js操作二進制數(shù)據(jù)方法，具有很好的參考價值，希望對的大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了js自定義彈框插件的簡單封裝，自己封裝一個彈框插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)時間倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07