zoukankan      html  css  js  c++  java
  • uni-app 切换按钮, 橙色的点击按钮

     这个按钮竟然是图片,我开始以为是原生的呢,难受,结果是以判断显示条件来显示哪个

     1 <view class="">
     2                 <view class="zhifu_zf" v-for="(payStypeVal, index) in payStype" :key="index" @click="zhifuChange(index)">
     3                     <label for=""><image :src="payStypeVal.image" mode="" class="zhifu_image"></image></label>
     4                     <label for="" class="zhifu_zf_zi">{{ payStypeVal.name }}</label>
     5                     <label for=""  class=""><image :src="isCheckState==index?iconsel: iconNosel" class="section" :class="isCheckState==index?iconsel: iconNosel" ></image></label>                
     6                     <view class="xian"></view>
     7                 </view>
     8             </view>
     9 import weixin from '../../static/kaika_xuanren/jiezhang-icon-wxzf@2x.png'
    10 export default {
    11     data() {
    12         return {
    13             iconsel: "../../static/checkbox_button/jiezhang-icon-anniu-sel.png",
    14             iconNosel: "../../static/checkbox_button/jiezhang-icon-anniu-nor.png",
    15             isCheckState: 0,
    16             payStype:[
    17                 { name:"微信支付", image:weixin},
    18                 { name:"支付宝支付", image:require('@../../static/kaika_xuanren/jiezhang-icon-zfbzf@2x.png')},
    19                 { name:"现金支付", image:'../../static/kaika_xuanren/jiezhang-icon-xjzf@3x.png'}
    20             ]
    21         };      
    22     }
        methods: {
    		zhifuChange(index){
    			this.isCheckState = index;
    		}
    	}
    
    
    

      

    23

    css

    .zhifu_image {
    	height: 40upx;
    	 40upx;
    	margin-left: 10upx;
    	margin-top: 30upx;
    	position: relative;
    	top: 10upx;
    }
    .zhifu_zf_zi{
    	padding-left: 20upx;
    	line-height: 60upx;
    }
    .zhifu_zf {
    	margin-left: 30upx;
    	position: relative;
    	bottom: 10upx;
    	 610upx;
    }

    .xian {
        background-color: #e5e5e5;
         100%;
        height: 1upx;
        position: relative;
        top: 10upx;
    }

    效果图

    不要问我为什么第一段代码22行和23行中间多了一块, 我点击的方法忘放上去了, 代码放进去行号就从1开始了, 谁知道代码怎么能接着顺序啊!!! 求告诉!!!

  • 相关阅读:
    Single Number II
    Pascal's Triangle
    Remove Duplicates from Sorted Array
    Populating Next Right Pointers in Each Node
    Minimum Depth of Binary Tree
    Unique Paths
    Sort Colors
    Swap Nodes in Pairs
    Merge Two Sorted Lists
    Climbing Stairs
  • 原文地址:https://www.cnblogs.com/wo1ow1ow1/p/11205903.html
Copyright © 2011-2022 走看看