zoukankan      html  css  js  c++  java
  • 小程序单选框 radio

    <view class="gender-box">
      <radio-group class="radio-group" bindchange="radioChange"  >
      <view class="gender-con gender-con-border">
        <view class="gender-con-cell">
          <view class="gender-text">男</view>
            <radio bindtap='Checked' data-type='1' checked="{{gender==1?true:false}}" color="#F80000"/>
        </view>
      </view>
      <view class="gender-con">
        <view class="gender-con-cell">
          <view class="gender-text">女</view>
            <radio bindtap='Checked' data-type='2' checked="{{gender==2?true:false}}" color="#F80000"/>
        </view>
      </view>
    </radio-group>
    </view>
    <view class="btns {{gender?'':'disableBtn'}}">
      <view class="btn" bindtap="saveInfor" >保存</view>
    </view>

    wxss

    /* subpackageA/pages/invoiceManage/addInvoice/addInvoice.wxss */
    .section {
      padding: 20rpx 0 0 0;
      margin-bottom: 102rpx;
    }
    
    .section .title {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .o-btn-group {
      display: flex;
      align-items: center;
    
    }
    
    .o-btn-group .w-btn {
      margin-right: 15rpx;
    }
    
    .o-btn-group .o-btn {
      background: #ffeceb;
    }
    
    .clear {
       40rpx;
      height: 40rpx;
      padding: 12rpx;
    }
    
    .submit-btn {
      margin: 50rpx 30rpx
    }
    
    .jd-cell-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10rpx 0;
      padding-top: 24rpx;
      box-sizing: border-box;
      height: 88rpx;
      box-sizing: border-box;
    }
    
    .btns {
       100%;
      text-align: center;
    }
    
    .btn {
       660rpx;
      height: 90rpx;
      line-height: 90rpx;
      background: linear-gradient(270deg, #F80000 0%, #FF4E18 100%);
      border-radius: 45rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FFFFFF;
      text-shadow: 0px 4rpx 10rpx rgba(248, 0, 0, 0.2);
      margin: 0 auto;
    }
    .gender-box{
      background: #ffffff;
      border-radius: 10rpx;
      margin:20rpx 20rpx 100rpx 20rpx;
    }
    .gender-con{
      margin:0 20rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      height: 100rpx;
    }
    .gender-con-border{
      border-bottom: 2rpx solid #F1F1F1;
    }
    .gender-con-cell{
      justify-content: space-between;
      display: flex;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
       100%;
    }
    .gender-con-cell input{
       100%;
    }
    .name-tips{
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 24rpx;
      margin-bottom: 82rpx;
      padding-left: 40rpx;
    }
    .disableBtn{
      opacity: 0.3;
    }
    .gender-text{
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
    }

    js

    const Util = require('./utils/util.js');
    const app = getApp()
    const {
      regeneratorRuntime
    } = global
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        gender: '0', 
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
       //  this.getCurrentUserInfo() //获取当前用户信息
      },
      async getCurrentUserInfo() {
        let result = await Util.getUserInfo();
        this.setData({
            gender: result.gender
        })
      },
    
      alert(title, options = {}) {
        wx.showToast({ icon: 'none', title: title, ...options })
      },
      // 保存
      async saveInfor() {
        if(!this.data.gender){
          return
        }
        let params = {
          gender:this.data.gender
        }
        let res = await Util.request('/update', params, true)
        console.log('添加保存:::', res)
        if (res) {
          wx.showToast({
            title: '保存成功',
            mask: true
          })
          setTimeout(() => {
            wx.navigateBack({
              delta: 1,
            })
          }, 1500);
        }
       
      },
      async Checked(e) {
        let gender = e.currentTarget.dataset.type;
        this.setData({
          gender: gender
        })
    },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      }
    })
  • 相关阅读:
    eclipse tomcat插件
    eclipse.ini
    iBatis杂记
    oracle 10g express 下载网址
    免费ftp客户端 winscp
    maven web app 发布到Tomcat
    sqlserver获取本月最后一天
    ArrayCollection和ComboBox
    flex框架 Cairngorm
    HDU3420 Bus Fair
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/15048341.html
Copyright © 2011-2022 走看看