微信小程序使用radio显示单选项功能【附源码下载】
本文实例讲述了微信小程序使用radio显示单选项功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
① index.wxml
<radio-group bindchange="radiogroupBindchange"> <radio value="radio1">radio1</radio> <radio value="radio2">radio2</radio> <radio value="radio3">radio3</radio> </radio-group> <view>提示:{{text}}</view>
② index.js
Page({ data:{ // text:"这是一个页面" text:'' }, radiogroupBindchange:function(e){ console.log(e); this.setData({ text:'您选择了'+e.detail.value }) } })
3、源代码点击此处本站下载。
关于radio组件的更多详细说明还可参考官网:https://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html
希望本文所述对大家微信小程序开发有所帮助。
相关推荐
-
微信小程序实现多选删除列表数据功能示例
本文实例讲述了微信小程序实现多选删除列表数据功能.分享给大家供大家参考,具体如下: 实现小程序一个类似多选列表删除的功能 <!-- 错题本 --> <view class="contarner"> <view class="content"> <view class="title flex-def flex-cCenter flex-zBetween"> <view>错题本(<te
-
微信小程序单选radio及多选checkbox按钮用法示例
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法.分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ v
-
微信小程序 checkbox组件详解及简单实例
微信小程序表单组件 checkbox 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: checkbox-group 多选项目组,内部由多个checkbox组成. checkbox-group内只能包含checkbox 属性名
-
微信小程序实现单选选项卡切换效果
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下 效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=
-
微信小程序实现单选功能
初次接触js弄了好长时间才出来效果,但是还是觉的不做梦完美,希望有更好的方式进行交流:实现效果如下: 虽说这个小功能但是对于我这个新手来说还是有点难:具体代码如下: WXML: <view class="backgrout-bj"> <view class="header"> 最多可增加4个功能入口 </view> <view> <block wx:for="{{model}}"> &l
-
微信小程序使用checkbox显示多项选择框功能【附源码下载】
本文实例讲述了微信小程序使用checkbox显示多项选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <checkbox-group bindchange="checkboxgroupBindchange"> <checkbox value="checkbox1">checkbox1</checkbox> <checkbox value="checkbox2&quo
-
微信小程序checkbox组件使用详解
本文为大家分享了微信小程序checkbox组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <view class="tui-menu-
-
微信小程序(十五)checkbox组件详细介绍
不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-group(只能包含checkbox)中设置监听事件. checkbox-group监听方法: checkbox多选属性: wxml <!--checkbox-group就是一个checkbox组 有个监听事件bindchange,监听数据选中和取消--> <checkbox-group bindchange="listenChec
-
微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下 代码: <!--hotblood_gongkao/pages/answer/answer.wxml--> <!-- content --> <view class='answer-list'> <view class='answer-child'> <text class='answer-title'><text style='margin-right:28rpx;
-
微信小程序自定义多选事件的实现代码
要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单的是自己绑定事件,然后切换选择和未选择的图片.而小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断. 直接上代码: wxml: <view class="sel-box"> /**用wx:for来进行列表渲染**/ <view wx:for="{{repContent}}" class="mu
-
微信小程序 radio单选框组件详解及实例代码
微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成 属性名 类型 默认值 说明 bindchange EventHandle radio-g
随机推荐
- Angular4实现鼠标悬停3d倾斜效果
- C# 获取硬件参数的实现方法
- MySQL如何查看元数据锁阻塞在哪里
- JDBC连接Sql Server 2005总结
- 实现Win 2000系统补丁的快速安装
- IIS7 网站发布常见报错问题解决方案汇总
- JVM之参数分配(全面讲解)
- 浅谈java基本数据类型的范围(分享)
- 详解Ubuntu 16.04 搭建KVM环境
- jQuery MD5加密实现代码
- PHP cdata 处理(详细介绍)
- php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法 原创
- sql server Bulk Insert命令详细
- 一个小例子解释如何来阻止Jquery事件冒泡
- 使用plupload自定义参数实现多文件上传
- IIS SHTML支持设置方法(SSI)
- iOS socket网络编程实例详解
- 23种设计模式(11)java策略模式
- 详解Android JNI的基本使用(CMake)
- python删除过期log文件操作实例解析