• 小程序 中 自定义单选框样式


    <radio-group  name="country" class="radio-group" bindchange="radioChange">
          <label class="radio" wx:for="{{items}}"  wx:key="{{index}}">
            <radio value='{{item.value}}' checked='{{item.checked}}'></radio>
            <!-- <radio value="{{item.name}}" checked="{{item.checked}}" /> -->
            <block wx:if="{{yjIndex == item.value}}">
              <image src='../img/diananniu_yidian.png'></image>
            </block>
            <block wx:else>
              <image src='../img/diananniu_weidian.png'></image>
            </block>
            {{item.name}}
          </label>
      </radio-group>
    
    data数据
    items:[
          { name: '是', value: 1 },
          { name: '否', value: 0 ,checked:true}
        ],
    yjIndex:0,

    单选点击事件

    radioChange:function (event) {
        this.setData({
          yjIndex: event.detail.value
        })
      },
    

     CSS样式

    .radio{
      position:relative;
    }
    .radio radio{
      opacity: 0;
    }
    .radio image{
      position:absolute;
      top:0;
      left:0;
      44rpx;
      height:44rpx;
    }
    

      

  • 相关阅读:
    React 之 jsx
    React 之 初识
    vue 之 svg
    c#进阶 之 特性
    c#进阶 之 反射Reflection
    面试题解答分析
    c#进阶 之 泛型
    c#进阶 之 修饰符
    c#进阶 之 方法汇总
    微信开发学习(二)
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/10374329.html
Copyright © 2020-2023  润新知