微信小程序例子——使用radio显示单选项

最新推荐文章于 2024-05-08 21:06:02 发布

原创最新推荐文章于 2024-05-08 21:06:02 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Web前端 #互联网 #微信小程序 #编程语言 #前端开发

微信小程序开发例子同时被 2 个专栏收录

65 篇文章

订阅专栏

微信小程序开发例子【表单组件】

7 篇文章

订阅专栏

本文介绍了一个使用微信小程序实现的单选按钮组案例，包括效果展示、关键代码及获取完整源代码的方式。通过简单的 index.wxml 和 index.js 文件，展示了如何在小程序中设置并响应单选按钮组的选择变化。

1、效果展示

2、关键代码

index.wxml


  radio1
  radio2
  radio3

提示：{{text}}

index.js

Page({
  data:{
    // text:"这是一个页面"
    text:''
  },  
  radiogroupBindchange:function(e){
    this.setData({
      text:'您选择了'+e.detail.value
    })
  }
})

3、源代码获取方式

百度云链接：http://pan.baidu.com/s/1eScBBTg

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

FutrueJet

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序项目快速开发

jimson_zhu的博客

11-03

1221

一）何为微信小程序 张小龙说：小程序是一种不需要安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。小程序能做什么：查天气、查交通、翻译、点餐、娱乐……都可以实现，覆盖了生活的方方面面。小程序的定位：比网站体验好——可以使用手机原生的底层接口，比如...

【微信小程序】表单组件-radio单选项组件

最新发布

墨夶的博客

11-23

1597

通过使用 CSS，可以自定义radio组件的样式，使其更加符合应用的设计风格。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序radio组件使用详解

08-28

主要为大家详细介绍了微信小程序radio组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序radio单选按钮选中与取消

weixin_43923808的博客

07-28

4220

【代码】微信小程序radio单选按钮选中与取消。

微信小程序之自定义表单组件(radio)

北边一颗小星星

05-24

1万+

背景：最近在做项目的时候遇到一个问题，那就是微信的官方表单组件的可扩展性不强，无法达到设计稿所要求的效果，所以想到了用自定义组件的方法自定义一个表单组件。（自定义组件其实往往用在需要复用的地方，比如每个页面都有一样的头部和底部，那么我们就可以把它们封装到自定义组件中，这样就不用每个页面都复制粘贴一样的一堆代码了）开始：下面以自定义radio组件为例：官方radio的样式只能修改color(当然要修改其他样式也是有办法的，不过较为麻烦，这里先不提)，扩展性不强。而我想要达到类似

微信小程序——Radio实现单选功能

zkw_1998的博客

04-07

2558

1.wxml代码 <text>请选择你的测试场景</text> <radio-group bindchange="radiochange"> <radio value='Q3'>3m安静</radio> <radio value='P1'>1m强干扰</radio> <radio value='S3' &gt...

微信小程序——radio组件

Kinggitte的書棚

01-11

1361

a.js 没啥可说的，单纯的数据罗列 data: { array: [ { name: '1', value: 'select 1', checked: 'true' }, { name: '2', value: 'select 2' }, { name: '3', value: 'select 3' }, { name: '4', value: 'sele

微信小程序开发的学习资料收集

zhan9le的博客

06-28

1万+

小程序开发学习资料集合

微信小程序开发：调查问卷案例详解与代码实现

本资源是一份关于微信小程序开发的教程，特别是针对第4章中的一个具体案例——调查问卷功能的实现。首先，我们关注于"调查问卷"这个页面的设计和编码。该页面由三个主要部分构成：`index.json`、`wxml` 和 `wxss` ...

微信小程序组件精讲：单选和多选按钮使用秘籍

微信小程序中单选按钮（radio）和多选按钮（checkbox）组件是构建动态表单和用户交互的重要元素。本文旨在深入分析这些组件的结构、属性、事件处理和样式定制，并探讨在表单应用中的综合实践。同时，本文还将讨论...

微信小程序源码分享—智能小蜜

u011827504的博客

08-14

4173

该程序支持功能有查天气、查诗词、查百科、算算术、看笑话等。

小程序，radio隐藏勾选+数组的使用

weixin_43993121的博客

01-04

961

小程序radio单选框回显

皮皮的博客

12-21

1819

话不多说，效果图如下：具体代码如下： js代码如下：希望能帮到你们，记得点赞收藏哦！

微信小程序选择按钮

尘封的落叶的博客

04-15

2901

1.单选：radio实例：js:Page({data : {radioId:"",loves:[{id:1， name:"跑步" ，checked : 'true'},{id:2， name:"篮球" },{id:3， name:"足球" },]},updataRadio:function(e){var Id=e.value.idthis.setData({radioId:Id})},})wxml...

微信小程序控件新秀：掌握Radio与Checkbox、Cell的实战入门秘籍【代码示例】

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

05-08

1559

掌握了radiocheckbox及cell的使用，你的小程序交互设计将更加丰富多元。在实际开发中，你是否遇到过哪些有趣或棘手的问题？是否有更高效的实现技巧或优化方案愿意分享？在评论区留下你的见解，让我们共同探讨，不断优化微信小程序的表单选择控件应用，提升用户体验的每一个细节。此外，对于无障碍设计在这些控件中的融入，你有哪些思考？如何让小程序更加包容性更强？期待你的声音。欢迎来到我的博客，很高兴能够在这里和您见面！

微信小程序：实现列表单选

weixin_46001736的博客

10-09

1537

微信小程序：实现列表单选

微信小程序开发笔记（1.2）单项选择框radio的使用

小姚的博客

05-26

5609

微信小程序组件滚动选择器radio使用详解

微信小程序-radio(自定义)

WANG_CA的博客

06-21

7782

小程序官方本提供了该组件的使用，但是扩展性不太好，为了防止和CheckBox混淆,所以单独剔分出来一、HTML<view wx:for="{{radio}}" wx:key="{{*this}}" class="checkbox '{{item.checked?'checkedActive':''}}'" data-id="{{index}}" bindtap='getradio'>...

微信小程序 radio-group（排列）及事件绑定、点击切换样式