uniapp 点击按钮时改变颜色，点击结束后恢复原颜色

本文转载自查看原文 2020-11-23 16:56 3439 uniapp

 1 <template>
 2     <view class="container">
 3         <view class="listbox">
 4             <view class="sublistbox">
 5                 <view class="box30">
 6                     <text class="txt-fontsize14-gray">充值金额：</text>
 7                 </view>
 8                 <view class="box40">
 9                     <input class="priceinput" type="text" value="" v-model="price"/>
10                 </view>
11                 <view class="box30">
12                     <text class="txt-fontsize14-gray">元</text>
13                 </view>
14             </view>
15             <view class="pricelistbox" >
16                 <view class="pricebox" v-for="(item,index) in priceList" :key="index" @tap="priceChange(index)">
17                     <view class="priceinerbox"  :class="{active:item.isSelect}">
18                         <text class="txt-fontsize16">{{item.name}}</text>
19                     </view>
20                     
21                 </view>
22             </view>
23         </view>
24     </view>
25 </template>
26 <script>
27     export default {
28         data() {
29             return {
30                 price: 0,
31                 priceList:[{name:'+100',value:100,isSelect:false},{name:'+200',value:200,isSelect:false},{name:'+500',value:500,isSelect:false},
32                         {name:'+1000',value:1000,isSelect:false},{name:'+2000',value:2000,isSelect:false},{name:'清零',value:0,isSelect:false}]
33             }
34         },
35         methods: {
36             priceChange(n) {
37                 var p=this.price;
38                 var _this=this;
39                 _this.priceList[n].isSelect=true;
40                 if(n==5){
41                     this.price=0;
42                 }
43                 else{
44                     this.price=p+this.priceList[n].value
45                 }
46                 setTimeout(function() {
47                   _this.priceList[n].isSelect=false;
48                  }, 300);
49             }
50         }
51     }
52 </script>
53 
54 <style>
55     .pricelistbox{
56         width: 94%;
57         height: 20vh;
58         display: flex;
59         flex-direction: row;
60         flex-wrap: wrap;
61         justify-content: center;
62         align-items: center;
63     }
64     .pricebox{
65         width: 30%;
66         display: flex;
67         flex-direction: column;
68         justify-content: center;
69         align-items: center;
70     }
71     .priceinerbox{
72         width: 90%;
73         height: 7vh;
74         border: 2px solid #66CDAA;
75         border-radius: 10px;
76         display: flex;
77         flex-direction: column;
78         justify-content: center;
79         align-items: center;
80     }
81     .active{
82         background-color: #66CDAA;
83         color: white;
84     }
85 </style>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 点击按钮变色，松开按钮恢复原来的颜色 Android点击按钮后改变颜色点击jQuery Mobile的按钮改变颜色 android button 点击后改变字体颜色 android button 点击时改变颜色(2) android button 点击时改变颜色 JQuery实现点击多个标签背景变色，点击变色的恢复原来的颜色点击按钮触发div颜色改变的几种写法 .NET中动态生成的表格，当鼠标经过tr时改变tr当前颜色，当鼠标移开恢复原来的颜色动态改变颜色之后，恢复原来的背景色