精华内容
下载资源
问答
  • 主要介绍了微信小程序单选框如何自定义赋值,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 单选框

    2019-09-27 18:07:39
    //index.wxml <view class="item"> <...单选</p> <block wx:for="{{box}}" wx:for-item="box" wx:for-index="index"> <view wx:if="{{choose==index}}"> <view ...

    //index.wxml

    <view class="item">
       <p>单选</p>
       <block wx:for="{{box}}" wx:for-item="box" wx:for-index="index">
         <view wx:if="{{choose==index}}">
           <view bindtap="choose" data-index="{{index}}" class="box_choose box">{{box.name}}</view>
         </view>
         <view wx:else="{{choose==index}}">
           <view bindtap="choose" data-index="{{index}}" class="box">{{box.name}}</view>
    </view>
        </block>
        </view>

     

    index.wxss

    .item {
      padding-top: 15%;
      margin-top: 5%;
      position: relative;
      display: -webkit-flex;
    }
    .item p {
      position: absolute;
      color: #adadad;
      top: 10%;
      left: 10%;
    }
    .item view {
      margin: 5%;
      flex: 1;
    }
    .box {
      width: 150rpx;
      height: 150rpx;
      text-align: center;
      padding-top: 35%;
      border: 1px solid black;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .box_choose {
      background-color: #4889fe;
      color: white;
      border-color: white;
    }

    //index.js

    Page({
      data: {
        box: [
          {
            name: 'box1-1',
            id: 0,
            class: ''
          },
          {
            name: 'box1-2',
            id: 1,
            class: ''
          },
          {
            name: 'box1-3',
            id: 2,
            class: ''
          }
        ],
        box2: [
          {
            name: 'box2-1',
            id: 0,
            class: ''
          },
          {
            name: 'box2-2',
            id: 1,
            class: ''
          },
          {
            name: 'box2-3',
            id: 2,
            class: ''
          }
        ],
        choose: -1,
        choose2: -1
      },
      onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        box2 = that.data.box2;
        // console.log(box);
      },
      onReady: function () {
        // 页面渲染完成
        wx.setNavigationBarTitle({
          title: '选择',
          success: function (res) {
            // success
          }
        })
      },
      onShow: function () {
        // 页面显示
      },
      onHide: function () {
        // 页面隐藏
      },
      onUnload: function () {
        // 页面关闭
      },
      choose: function (evnet) {
        console.log(event.data.msg.data.data.data.currentTarget.dataset.index);
        // var index = event.data.msg.data.data.data.currentTarget.dataset.index;
        var that = this;
        if (event.data.msg.data.data.data.currentTarget.dataset.index == that.data.choose) {
          that.setData({
            choose: -1
          });
        } else {
          that.setData({
            choose: event.data.msg.data.data.data.currentTarget.dataset.index
          });
        }
      }
    })

     

    转载于:https://www.cnblogs.com/panlaixing/p/6552910.html

    展开全文
  • 一、页面效果 二、实现html代码 <!-- 遍历展示地址信息 --> <radio-group bindchange="radioChange" class="fontChange"> ...label wx:for="{{needShowAddress}}" wx:key="address">... {{item.na

    一、页面效果
    在这里插入图片描述
    二、实现html代码

      <!-- 遍历展示地址信息 -->
      <radio-group bindchange="radioChange" class="fontChange">
        <label wx:for="{{needShowAddress}}" wx:key="address">
          <view>
            <radio value="{{item._id}}" />
            {{item.name}}
            {{item.phone}}
            {{item.address}}
          </view>
        </label>
      </radio-group>
    

    三、获取被点击的value值

    radioChange: function(e) {
      console.log('radio发生change事件,携带value值为:', e.detail.value)
    }
    
    展开全文
  • 微信小程序 单选框实现

    千次阅读 2019-09-30 22:55:34
    wxml: <radio-group class="radio-group" bindchange="radioChang" data-id="{{item.id}}"> <view class='ra' bindtap='next'> <radio value="1"><text>失物招领<.../ra...

    wxml:

    <radio-group class="radio-group" bindchange="radioChang" data-id="{{item.id}}">
    <view class='ra' bindtap='next'>
    <radio value="1"><text>失物招领</text></radio>
    </view>
    <view class='ra' bindtap='next'>
    <radio value="2"><text>寻物启事</text></radio>
    </view>
    </radio-group>
     
    js:
     
    radioChang: function (e) {
    console.log('radio发生change事件,携带value值为', e.detail.value)
    },

    转载于:https://www.cnblogs.com/lsyy2017/p/11564414.html

    展开全文
  • css代码 /*checkbox未选中时样式 */ checkbox .wx-checkbox-input { /* 自定义样式.... */ border-radius: 50%; } .../* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ checkbox .wx-checkbox-...

    在这里插入图片描述

    css代码

    /*checkbox未选中时样式 */
    checkbox .wx-checkbox-input {
      /* 自定义样式.... */
      border-radius: 50%;
    
    }
    
    
    /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
    checkbox .wx-checkbox-input.wx-checkbox-input-checked {
      /* border: none; */
      border-radius: 50%;
      border-color: #FFDE00 !important;
      border-width: 2rpx;
    
    }
    
    /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
    checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
      /* 去除对号 */
      content: '';
      /* background: #fff; */
      width: 43rpx;
      height: 43rpx;
      border-radius: 50%;
      /* background: red; */
      background-color: #FFDE00;
      /* 居中 */
      /* margin-top: 0rpx;
      display: flex;
      position: relative; */
    }
    
    展开全文
  • 微信单选按钮如果只设置一个,怎么让他选中,或者选中了怎么取消掉 wxml中的代码: &lt;radio bindtap='radioClick' checked="{{radioCheck}}"/&gt;{{instructionBook}} js中的代码 data:...
  • 微信小程序单选框 radio 样式的修改

    千次阅读 2019-06-12 15:55:37
    /* 单选钮样式 */ radio { transform:scale(0.8); }
  • /* radio未选中时样式 */ radio .wx-radio-input{ border-radius: 3rpx; height: 26rpx; width: 26rpx; margin-top: -4rpx; /* 自定义样式.... */ } /* radio未选中时样式 */ ...widt...
  • 1,radio-group是radio的父级组件,而你的代码wx:for循环了radio-group,所以事实上你的代码是有很多radio-group,而不是一组radios。故而你的radio按钮可以多选; 2,之所以取消不了,是因为radio按钮本身所致,...
  • 微信小程序单选框radio  相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序...
  • 微信小程序radio单选框 效果: 选中男返回male,选中女返回female wxml: <radio-group bindchange="handlechange"> <radio value="male">男</radio> <radio value="female">女</radio&...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 效果图 <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{k7}}" wx...
  • xml <label class="checkbox"> <checkbox checked="checked" disabled />获取您的公开信息(头像、昵称)等 .../*复选样式*/ checkbox .wx-checkbox-input { width: 8px; height: 8px; bo...
  • /* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 40rpx; /* 背景的宽 */ .../* 这里如果不能修改背景颜色,在选中后的样式中添加background...
  • 微信小程序-radio单选框

    千次阅读 2020-01-31 19:55:51
    微信小程序-radio单选框 demo.wxml <!-- radio 单选框 1 radio标签 必须要和 父元素 radio-group 来使用 2 value 选中的单选框的值 3 需要给 radio-group 绑定 change 事件 4 需要在页面中显示 选中的值 -...
  • 之前写过关于多选框设置样式的办法,其实与单选框设置的...关于多选框的设置方法:微信小程序checkbox多选框如何修改宽高及选中样式 <radio-group @change="radioChange"> <label> <radio value="1
  • 通过wx:for将数组渲染到页面,每个核选项都有两个单选按钮,分别是符合和不符合按钮,点击对应按钮会将改变对应那条元素中的选择状态的值,且点击不符合时,会显示出一个文本域,让用户输入不符合原因。 页面最下面...
  • 话不多说,直接上码,复制粘贴直接上手 html {{item.label}} js Page({ data: { sex: 0, radios: [ { label: '男', value: '男', }, { label: '女', value: '女'... 喜欢上方小程序,需要源码的,添加博主微信私信小编.
  • 单选框 <text>{{item.value}} wxss: .radio-group { border-bottom: 1px solid #ddd; } .radio { display: block; border-top: 1px solid #ddd; padding: 5px; } js: ...
  • 微信小程序中自定义单选框/多选框样式 1.先看多选框 具体代码如下 (1).wxml代码 // .wxhtml代码(只是一部分) &amp;lt;checkbox-group class='checkboxList' bindchange=&quot;checkboxChange&quot;&...
  • 主要介绍了微信小程序如何实现radio单选框单击打勾和取消,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 6
收藏数 118
精华内容 47
关键字:

微信小程序单选框

微信小程序 订阅