微信小程序如何实现radio单选框单击打勾和取消

前端使用input 来写radio,小程序使用radio标签 也可以使用<radio />单标签

1.自定义radio样式、

wx默认的是真的丑

/* 单选框样式 */
   /* 初始样式 */
 radio .wx-radio-input{
 width: 32rpx;
 height: 32rpx;
 border-radius: 0

}
/* 选中后的 背景样式 （ 背景 边框 ） */
radio .wx-radio-input.wx-radio-input-checked{
 width: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
 height: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */

 background:white!important;
}
/* 选中后的 对勾样式  */
radio .wx-radio-input.wx-radio-input-checked::before{

 width: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
 height: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
 line-height: 32rpx;
 text-align: center;
 font-size:36rpx; /* 对勾大小 */
 color:black; /* 对勾颜色  */

 background: white;
 transform:translate(-50%, -50%) scale(1);
 -webkit-transform:translate(-50%, -50%) scale(1);
}

2.单选打勾再选打勾取消效果

wxml:

 <radio checked='{{check}}' id="radios" bindtap='radiocon'></radio><label for="radios">匿名</label>

wx.js

//这条代码在data里写
 check:false
radiocon:function(e){
  this.setData({
   check: !this.data.check
   })
  console.log("用户打勾的是 ",this.data.check)
 },

这样 就完成了单击打勾再击取消。

以上。

赞 (0)

相关推荐

  • 微信小程序仿RadioGroup改变样式的处理方案

    最开始想改变Radio的样式,但是发现自己写比较方便就直接写了一个. 先上效果: wxml: <view bindchange="radioChange"> <view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1

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

    本文为大家分享了微信小程序radio组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <view cla

  • 微信小程序使用radio显示单选项功能【附源码下载】

    本文实例讲述了微信小程序使用radio显示单选项功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <radio-group bindchange="radiogroupBindchange"> <radio value="radio1">radio1</radio> <radio value="radio2">radio2</radio> &l

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

  • 微信小程序如何修改radio和checkbox的默认样式和图标

    微信小程序如何修改radio和checkbox的默认样式和图标

    wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? </view> <view class="label">单选</view> </view> <view class="options"> <radio-group class="radio-gr

  • 微信小程序 radio单选框组件详解及实例代码

    微信小程序 radio单选框组件详解及实例代码

    微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成 属性名 类型 默认值 说明 bindchange EventHandle   radio-g

  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下: <!--index.wxml--> <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi

  • 微信小程序（十九）radio组件详细介绍

    微信小程序（十九）radio组件详细介绍

    radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radio时调用--> <radio-group bindchange="listenerRadioGroup"> <!--label通常与radio和checkbox结合使用--> <label style="display: flex" wx:for-items="{{a

  • 微信小程序如何实现radio单选框单击打勾和取消

    前端使用input 来写radio,小程序使用radio标签 也可以使用<radio />单标签 1.自定义radio样式. wx默认的是真的丑 /* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; border-radius: 0 } /* 选中后的 背景样式 ( 背景 边框 ) */ radio .wx-radio-input.wx-radio-input-checked{ width: 32r

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

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

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

  • 微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">

  • JS中微信小程序自定义底部弹出框

    实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_a

  • 微信小程序自定义弹出模态框禁止底部滚动功能

    图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view> <!--模态框--> <!-- 遮罩层 --> <view class="mod

  • 微信小程序自定义底部弹出框功能

    本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下 实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属性的弹出框.只需要把内容替换自己需要的即可. 1. wxml代码 <view class="wrap"> <view bindtap="showModal"> &

  • 微信小程序实现底部弹出框

    微信小程序的底部弹出框,供大家参考,具体内容如下 wxml <!-- 弹出框 start --> <view class="dialog_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="dialog_attr_b

  • 微信小程序实现modal弹出框遮罩层组件（可带文本框）

    微信小程序实现modal弹出框遮罩层组件（可带文本框）

    modal弹出框遮罩层可实现提示信息.验证码等功能 然而在官方文档已经删除了modal的页面,说要废弃modal 就个人而言modal组件无法被wx.showModal完全替代.大家都知道小程序的wxml的组件可以通过改变js的值实现重新渲染,而接口是无法实现的 有同感的也不止博主一个人 官方18-5-13的建议要实现此类功能也是用modal 属性 说下遮罩层实现,通过改变modal的hidden属性来控制是否显示,通过监听confirm方法来确认提交,通过bindinput来监听modal内表

  • 微信小程序实现自定义动画弹框/提示框的方法实例

    微信小程序实现自定义动画弹框/提示框的方法实例

    目录 前言 css3 实现动画 小程序动画 API-实现动画 结语 相关文档 前言 在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等 如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库 怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画 如下是wxml代码 <view> <view class="click-btn" catcht

  • 微信小程序开发实现首页弹框活动引导功能

    微信小程序开发实现首页弹框活动引导功能

    目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现 总结 1.需求 后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片.用户可以关闭活动图片的显示. 1.管理后台可以新增活动时间段,是否弹框显示,弹框图片和活动是否开启配置 2.进入小程序时,请求一下后台是否有弹框活动,如果有,就弹框显示活动图片 2.数据库设计 由于小程序弹框活动是系统配置中的一项,直接使用公共的系统配置来存储弹框活动配置. 公共系统配置表结构如下: CREATE TABLE

随机推荐