微信小程序选择按钮

标签: checkbox-group radio
6人阅读 评论(0) 收藏 举报
分类:

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.id

this.setData({

radioId:Id

})

},

})

wxml:

<radio-group  class="radio"  bindChange="updataRadio">

<view wx:for="{{loves}}">

<radio  value="{{item.id}}"  checked="{{item.checked}}">{{item.name}}</radio>

</view>

</radio-group>


2.多选:CheckBox

实例:

js:

Page({

data : {

radioId:[],

loves:[

{id:1, name:"跑步" ,checked : 'true'},

{id:2, name:"篮球" },

{id:3, name:"足球" },

]

},

updataRadio:function(e){

var Id=e.value.id

this.setData({

radioId:Id

})

},

})

wxml:

<checkbox-group  class="checkbox"  bindChange="updataRadio">

<view wx:for="{{loves}}">

<chechbox  value="{{item.id}}"  checked="{{item.checked}}">{{item.name}}</chechbox  >

</view>

</checkbox-group >


附:多选获得的值是一个数组,单选获得的值是一个单值
查看评论

微信小程序--多个按钮选中的联动效果

场景:画图应用需选择画笔颜色,有4种颜色按钮可供选择,用户点击任意按钮进行颜色切换。 思路:通过curColorIndex变量保存当前选中的颜色下标,选中后添加额外的选中样式。 一,can...
  • rolan1993
  • rolan1993
  • 2017-10-21 11:15:06
  • 1215

微信小程序--单选复选按钮组的实现

本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定DOM截点,实现的原理就是通过bindtap点击的事件方法获取data-id进行循环遍历取反而实现该效果。 (一)单选按...
  • qq_38209578
  • qq_38209578
  • 2017-12-15 11:22:57
  • 2405

微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法

实现效果: 背景图片: .wxml文件 {{item.name}} {{item.price}}元 ...
  • kelisentian
  • kelisentian
  • 2017-05-28 15:03:13
  • 9866

微信小程序---图书管理系统题库:选择选项,切换至下一题

  • 2017年12月11日 13:54
  • 640KB
  • 下载

微信小程序 右下角圆形浮动选择框样式

Rt css小白,碰到这个破样式,网上没找到现成的,捣鼓了下贡献给我一样的小白 .circle-float{ color: #ffffff; position: fixed; d...
  • csdn_huangjiama
  • csdn_huangjiama
  • 2017-11-07 17:19:00
  • 958

微信小程序-外卖选购页实现切换分类与数量加减

关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤: 效果图 实现以下功能 一、 点击分类项,切换右边的食品,并高亮自身 这个实现比较简单,给一个states数组,用于记录每一项...
  • qq_38125123
  • qq_38125123
  • 2017-07-19 09:44:53
  • 1570

微信小程序获取详细位置信息

我们要实现的是,点击一个按钮然后,跳转到地图位置选择页面,选择完位置之后,拿到详细的数据信息(经度、纬度、选择名称、选择的详情)多了不说,直接上代码。1.wxml&amp;lt;view class=...
  • qq_32113629
  • qq_32113629
  • 2018-03-05 16:26:22
  • 101

【微信小程序】button按钮控件的演示

案例1mini按钮      案例2有效按钮     案例3警告按钮     案例4透明按钮     案例5禁止按钮     案例6加载按钮     案例7 自定义按钮方法 ...
  • xiongyongting
  • xiongyongting
  • 2017-01-14 20:19:32
  • 2523

微信小程序--左滑显示按钮demo

wxml结构(删除部分代码): {{item.title}} ...
  • rolan1993
  • rolan1993
  • 2017-12-15 12:06:14
  • 169

微信小程序把玩(十四)button组件

button按钮用的算是最普遍的组件之一。主要属性:wxml Defalut Primary
  • u014360817
  • u014360817
  • 2016-09-25 22:14:20
  • 19394
    个人资料
    等级:
    访问量: 0
    积分: 132
    排名: 0
    文章分类
    文章存档