请问在小程序中如何获取选中的radio的value值,以下是我的代码,用了三个swiper承载三个问题,选择完三个问题后弹出选择的结果,请问如何实现
/!-- index.wxml -->
<!-- 问题区域 -->
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">第一题</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">第二题</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">第三题</view>
</view>
<!-- 选项区域 -->
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<!-- 第一题选项 -->
<swiper-item>
<radio-group bindchange="swiperChange">
<label class="option"><radio checked="" value="1" name="1" />A</label>
<label class="option"><radio checked="" value="2" name="1" />B</label>
<label class="option"><radio checked="" value="3" name="1" />C</label>
<label class="option"><radio checked="" value="4" name="1" />D</label>
</radio-group>
</swiper-item>
<!-- 第二题选项 -->
<swiper-item>
<radio-group bindchange="swiperChange">
<label class="option"><radio checked="" value="1" name="2" />A</label>
<label class="option"><radio checked="" value="2" name="2" />B</label>
<label class="option"><radio checked="" value="3" name="2" />C</label>
<label class="option"><radio checked="" value="4" name="2" />D</label>
</radio-group>
</swiper-item>
<!-- 第三题选项 -->
<swiper-item>
<radio-group bindchange="swiperChange">
<label class="option"><radio checked="" value="1" name="3" />A</label>
<label class="option"><radio checked="" value="2" name="3" />B</label>
<label class="option"><radio checked="" value="3" name="3" />C</label>
<label class="option"><radio checked="" value="4" name="3" />D</label>
</radio-group>
</swiper-item>
</swiper>
// index.js
var app = getApp()
Page({
data: {
/**
* 页面配置
*/
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
value: []
},
onLoad: function() {
var that = this;
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function(res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
/**
* 滑动切换tab
*/
bindChange: function(e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
/**
* 点击radio切换
*/
swiperChange: function(e){
var that = this;
var radioValue = e.detail.value;
that.setData({
value : radioValue
})
console.log(that.data.value);
if(that.data.currentTab>=2){
wx.navigateTo({
url: '../page3/page3',
});
}else{
that.setData({
currentTab: that.data.currentTab + 1
});
}
}
})
/* index.wxss */
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #777777;
text-align: center;
line-height: 80rpx;
}
.swiper-tab-list{
float: left;
font-size: 30rpx;
width: 100%;
color: #777777;
display: none;
}
.on{
color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;
display: block;
}
.swiper-box{
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view{
text-align: center;
}
radio{
display: none;
}
.option{
border: 1px solid #ffe131;
display: block;
text-align: center;
margin: 10% auto;
width: 80%;
}
官方demo