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


    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          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          30%;
    66         display: flex;
    67         flex-direction: column;
    68         justify-content: center;
    69         align-items: center;
    70     }
    71     .priceinerbox{
    72          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>
  • 相关阅读:
    ES6的模块化历史
    javaee笔记之web.xml文件内的标签到底什么意思
    iTOP4412设备驱动学习五--地址和存储的概念
    iTOP4412设备驱动学习四--嵌入式硬件研发流程PCB和原理图的查看
    iTOP4412设备驱动学习三--设备节点的生成和调用:杂项设备驱动的注册和调用
    iTOP4412设备驱动学习二--在module中注册设备
    iTOP4412设备驱动学习一--设备和驱动的注册
    Linux下阅读源代码工具安装
    结构体
    综合实例:个人银行账户管理程序
  • 原文地址:https://www.cnblogs.com/wishit/p/14025474.html
Copyright © 2020-2023  润新知