微信小程序实现单选按钮

本文实例为大家分享了微信小程序实现单选按钮的具体代码，供大家参考，具体内容如下

逻辑

  • 单选框的逻辑比较简单，把所有的元素遍历出来，等到点击单选按钮的时候，当value值与遍历变量值一致的时候就 把checked 设置为true，其他的时候把checked设置为 false 只需要一次循环。
  • 复选框的逻辑，也不复杂，当只有一个被选中的选项的时候，当点击已经选择的选项的时候，首选外层循环设置为false，这个时候 e.detail.value为零，所以无法进入内层循环，所以被取消。当选中未选择的选项的时候，则从第一个选项开始遍历，如果value值与外层相同则设置为TRUE。然后跳出内层，继续遍历，当有两个选中的选项的时候，点击已经选择的按钮，values值会减少l，所以最后一次的外层循环无法进入内层，所有取消该选项。

举例， 两选一 , 默认选中第一个；效果图如下：

.wxml文件 ：

<view class='button_container'>
  <block wx:for="{{buttons}}" wx:key="buttons">
    <button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>
  </block>
</view>

.js文件 ：

Page({
  data:{
    buttons: [{ id: 1, name: '失物招领' }, { id: 2, name: '寻物启事' }]
  },
  onLoad: function() {//默认选了第一个
    this.data.buttons[0].checked = true;
    this.setData({
      buttons: this.data.buttons,
    })
  },
   
  radioButtonTap: function (e) {
  console.log(e)
  let id = e.currentTarget.dataset.id
  console.log(id)
  for (let i = 0; i < this.data.buttons.length; i++) {
    if (this.data.buttons[i].id == id) {
      //当前点击的位置为true即选中
      this.data.buttons[i].checked = true;    
    }
    else {
      //其他的位置为false
    this.data.buttons[i].checked = false;
    }
  }
  this.setData({
  buttons: this.data.buttons
  })
  }
})

.wxss文件 ：

.button_container{
  display: flex;
  flex-direction: row;
  justify-content: space-around
  }
  
  /* 按钮未选中 */
 .normal_button{
  background: white；
  }
  
  /* 按钮选中 */
  .checked_button{
  background: #36ab60;
  color: white
  }```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序单选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

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

    本文实例为大家分享了微信小程序实现单选按钮的具体代码,供大家参考,具体内容如下 逻辑 单选框的逻辑比较简单,把所有的元素遍历出来,等到点击单选按钮的时候,当value值与遍历变量值一致的时候就 把checked 设置为true,其他的时候把checked设置为 false 只需要一次循环. 复选框的逻辑,也不复杂,当只有一个被选中的选项的时候,当点击已经选择的选项的时候,首选外层循环设置为false,这个时候 e.detail.value为零,所以无法进入内层循环,所以被取消.当选中未选择的选项

  • 微信小程序开发之Tabbar实例详解

    微信小程序开发之Tabbar实例详解

    微信小程序 Tabbar 1.下载微信小程序开发软件: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 2.扫描二维码登录,在手机点击确认登录 3.新建一个项目,这里选择无APPID,如果需要填写APPID,需要到微信小程序里面注册,然后就可以获取APPID,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就

  • 微信小程序自定义组件实现单选功能

    微信小程序自定义组件实现单选功能

    本文实例为大家分享了微信小程序自定义组件实现单选的具体代码,供大家参考,具体内容如下 效果图: 调用部分(例如在index页面) index.wxml <view catchtap="showSinger">   单选按钮   <singer id="singer" bind:singerCancel="_singerCancel" bind:singerConfirm="_singerConfirm" si

  • 微信小程序单选框组应用详解

    微信小程序单选框组应用详解

    本文实例为大家分享了微信小程序单选框组应用的具体代码,供大家参考,具体内容如下 需求概述 有一个核选项数组,里面存放着核选项名称.内容.ID.选择状态.选择状态有未选择.符合.不符合三种,默认全部为未选择.通过wx:for将数组渲染到页面,每个核选项都有两个单选按钮,分别是符合和不符合按钮,点击对应按钮会将改变对应那条元素中的选择状态的值,且点击不符合时,会显示出一个文本域,让用户输入不符合原因. 页面最下面有一个提交按钮,点击时会遍历核选项数组,若有选择状态为未选择的项,则无法提交,并提醒.

  • 微信小程序实现简单的购物车功能

    本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 实现一个购物车页面,需要哪些数据.整理下大概如下:一个购物车商品列表(carts),列表里的单个item包含:商品id(id),商品图(image),商品名(title),单价(price),数量(amount),单选按钮(selected):全选按钮,需要一个字段(selectAllStatus)表示是否全选:总价(totalPrice):总数量(totalNum).还有一个需要判断的是购物车是否为空(hasLi

  • 微信小程序全屏滚动字幕的实现方法详解

    微信小程序全屏滚动字幕的实现方法详解

    目录 一.实现背景 二.实现代码 三.滚动速度 四.后续优化 实现效果 一.实现背景 无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果 二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu

  • 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组件,就可以在写界面的时候省不少时间和代码,轮播图片跟可滑动列表都可以用.导致现在回来写angular项目时也想整一个这样的组件出来,本文就将使用angular的组件能力和服务能力完成这么一个比较通用,耦合度较低的swiper出来. 首先要选择使用的技术,要实现的是与界面打交道的东西,自然是实现成一个

  • 微信小程序商城项目之淘宝分类入口（2）

    微信小程序商城项目之淘宝分类入口（2）

    分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例 下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文 微信小程序的页面跳转和参数传递 -- 微信小程序教程系列(6) 页面分析: 使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项. 这样满5个item后,自动排在下一行 wxml: <view class="menu-wrp"> <!

  • C#开发之微信小程序发送模板消息功能

    C#开发之微信小程序发送模板消息功能

    步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID 在微信公众平台手动配置获取模版ID 步骤二:页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 步骤三:调用接口下发模板消息 今天重要的说第三步怎么实现,前面的步骤比较简单就略过. ----------------------------

  • 微信小程序设置http请求的步骤详解

    微信小程序设置http请求的步骤详解

    http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请

随机推荐