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 
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/[email protected]')},
19                 { name:"现金支付", image:'../../static/kaika_xuanren/[email protected]'}
20             ]
21         };      
22     }
23 ｝

css

.zhifu_image {
	height: 40upx;
	width: 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;
	width: 610upx;
}

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

效果图

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11205903.html