1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序:实现单选按钮

微信小程序:实现单选按钮

时间:2022-09-10 03:49:28

相关推荐

微信小程序:实现单选按钮

样式:

wxml

<view class="pop_line"><view class="pop_left">性别</view><view class="pop_right"><radio-group bindchange="radioChange"><label wx:for-items="{{items}}" wx:key="index"><radio color="#74bfe7" style="transform:scale(0.8);" value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}</label></radio-group></view></view>

核心代码:

<radio-group bindchange="radioChange"><label wx:for-items="{{items}}" wx:key="index"><radio color="#74bfe7" style="transform:scale(0.8);" value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}</label></radio-group>

注解:

bindchange:有变化执行事件

wx:for-items:表示对{{items}}进行循环

<radio>中的color属性:主要设置选中之后图标颜色

<radio>中的style属性:这里主要用来展示图标的大,scale缩放

<radio>中的value属性:主要用于事件bindchange执行之后能获取到值

<radio>中的checked属性:设置默认值

wxss

/* 行信息 */.pop_line{display: flex;width:90%;margin:4%;}.pop_left{width:30%;}.pop_right{width:70%;text-align: right;}

JavaScript

const app = getApp()Page({data: {//设置单选内容items:[{name:'male',value:'男',checked:"true"//设置默认值},{name:'famale',value:'女'},]},//单选radioChange:function(e){//获取单选数据console.log(e.detail.value)//输出的是{{item.name}}的值},})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。