用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

湖人vs:小程序 點擊按鈕后修改顏色(樣式)

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-12-3 00:32

需實現的功能:點擊按鈕后,按鈕的顏色會加深效果展示:原按鈕點擊后按鈕思路:給按鈕設置一個點擊事件,點擊了按鈕后,修改按鈕的樣式。代碼:test.wxml文件 view wx:if="{{sty==0}}" view class="score" style="ba ...

需實現的功能:

點擊按鈕后,按鈕的顏色會加深

效果展示:

原按鈕 

點擊后按鈕

思路:

給按鈕設置一個點擊事件,點擊了按鈕后,修改按鈕的樣式。

代碼:

test.wxml文件

  1. <view wx:if="{{sty==0}}">
  2. <view class="score" style="background-color:{{score}};" catchtap='score'>
  3. <text>按鈕一</text>
  4. </view>
  5. </view>
  6. <view wx:if="{{sty==1}}">
  7. <view class="score" style="background-color:{{score}};" catchtap='score'>
  8. <text>按鈕一</text>
  9. </view>
  10. </view>

test.js文件

  1. Page({
  2. /*** 頁面的初始數據*/
  3. data: {
  4. sty:0,
  5. score: '#fff5df',
  6. },
  7. score: function (e) {
  8. //點擊按鈕,樣式改變
  9. let that = this;
  10. that.setData({
  11. sty: 1,
  12. score: 'rgba(252,178,22, 0.3)'
  13. });
  14. },
  15. )}

test.css文件

  1. .score{
  2. width:335rpx;
  3. border-radius:10rpx 0rpx 0rpx 10rpx;
  4. }
  5. .score text{
  6. color: #FCB216;
  7. }
分享至 : QQ空間
收藏
原作者: 故事外的人呀 來自: 簡書
  • 天下鈔票 2019-12-7 14:26
    1、用if判斷顯示有點多此一舉

    2、<view class=&quot;score&quot; style=&quot;background-color:{{score}};&quot; catchtap='score'>
    這句可以通過修改class來實現
    例如:<view class=&quot;score空格{{score}}&quot;catchtap='score'>
    或者:<view class=&quot;score{{score}}&quot; catchtap='score'>
    然后可以把style在wxss文件里修改

    不過,我提的也僅僅是一種思路。