漂亮的单选框，选完自动跳转

作者原创，转载请注明出处

作者： 刘冰华
2016-12-8 13：10

首先看一下成品

选择完性别后，自动跳回上一页面

页面结构.wxml

<view class="cells cells_radio">
  <radio-group bindchange="radioChange">
    <label class="cell check__label" wx:for="{{sexs}}" wx:key="{{item.value}}">
      <view class="cell__bd">
        <view class="p">{{item.name}}</view>
      </view>
      <view class="cell__ft">
        <radio value="{{item.value}}" checked="{{item.checked}}" hidden/>
        <icon type="success_no_circle" size="14" color="#09bb07" style="display:{{item.checked ? 'inline-block' : 'none'}}"></icon>
      </view>
    </label>
  </radio-group>
</view>

.json

{
    "navigationBarTitleText": "性别"
}

.js

Page({
    data : {
        commonFunction : null,
        myInfo : null,
        clearHidden : false,
        newName : '',
        canSubmit : false,
        focus : true,
        sexs : [
            {
                name : '男',
                value : 1,
                checked : false
            },{
                name : '女',
                value : 2,
                checked : false
            }
        ]
    },
    onLoad : function(){
        var app = getApp().globalData;
        this.commonFunction = app.commonFunction;
        this.commonFunction.getUserInfo.call(this);
        var sexs = this.data.sexs;
        sexs[this.data.myInfo.wx_gender - 1].checked = true;
        this.setData({
            myInfo : this.data.myInfo,
            API_URL : app.API_URL,
            sexs : sexs
        })
    },
    onShow : function(){
        this.commonFunction.getUserInfo.call(this);
        var sexs = this.data.sexs;
        sexs[this.data.myInfo.wx_gender - 1].checked = true;
        this.setData({
            myInfo : this.data.myInfo,
            sexs : sexs
        })
    },

    //提交修改
    radioChange : function(e){

        var that = this;
        var newgender = e.detail.value; //获取点击是哪个性别
        wx.navigateBack({
          delta: 1, // 回退前 delta(默认为1) 页面
          success: function(res){
            // success
          }
        })
        if(newgender != that.data.myInfo.wx_gender){//如果有更改性别则告诉服务器更新数据库，同时更新本地缓存
            wx.setStorageSync('wx_gender',newgender);        
            wx.request({
            url: this.data.API_URL + 'changeSex',
            data: {
                wx_gender : newgender,
                user_id : that.data.myInfo.user_id
            },
            method: 'GET', 
            success: function(res){
                console.log('更改用户性别成功')
            }
            })
        }
    }
});

最后截取相关的.wxss

/*列表cell*/
.cells {
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
  overflow: hidden;
  position: relative;
}
.cells::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.cells::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.cells__title {
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #999999;
  font-size: 14px;
}
.cells.first-child {
  margin-top: 0;
}
.cells__tips {
  margin-top: .3em;
  color: #999999;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
}
.cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.cell::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
  left: 15px;
}
/*
.cell:first-child::before {
  display: none;
}
*/
.cell_primary {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}
.cell__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.cell__ft {
  text-align: right;
  color: #999999;
}
.cell_access {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: inherit;
}
/*
.cell_access::active {
  background-color: #ECECEC;
}
*/
.cell_access .cell__ft {
  padding-right: 13px;
  position: relative;
}
.cell_access .cell__ft::after {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 2px;
}
.cell_link {
  color: #586C94;
  font-size: 14px;
}
/*
.cell_link:first-child::before {
  display: block;
}
*/
.check__label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*
.check__label::active {
  background-color: #ECECEC;
}
*/
.check {
  position: absolute;
  left: -9999em;
}
.cells_radio .cell__ft {
  padding-left: 0.35em;
}
/*
.cells_radio .check::checked + .icon-checked::before {
  display: block;
  content: 'EA08';
  color: #09BB07;
  font-size: 16px;
}*/
.cells_checkbox .cell__hd {
  padding-right: 0.35em;
}
/*.cells_checkbox .icon-checked::before {
  content: 'EA01';
  color: #C9C9C9;
  font-size: 23px;
  display: block;
}
.cells_checkbox .check::checked .icon-checked::before {
  content: 'EA06';
  color: #09BB07;
}*/
.label {
  display: block;
  width: 105px;
  word-wrap: break-word;
  word-break: break-all;
}