Realization of Single Selection Box in Mini Program
I have been working on this small program for a day to realize the radio button. This time I will record how to realize it
.
First look at the renderings and first realize the radio button.
Put the code WXML
<view class="page-body">
<view class="page-section">
<view class="view-cl">
<view class="page-section-title">请选择处理结果</view>
</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{
{items}}" wx:key="{
{item.value}}">
<view class="weui-cell__hd">
<radio value="{
{item.value}}" checked='true'/>
</view>
<view class="weui-cell__bd">{
{
item.name}}</view>
</label>
</radio-group>
</view>
</view>
</view>
JS code
Page({
data:{
Processing:'3',
items: [
{
value: '1', name: '自行处理',},
{
value: '2', name: '送医'},
{
value: '3', name: '其他'},
]
}
})
Then the single selection style of the page should come out. Now how to get the value of our choice?
Steps The first step is to use bindchange="radioChange" method.
This has been written in the above code. If you copy the above code, there is no need to do anything here. The
second step is to set a variable in data. This is the same as the above code. Processing: '3' is a variable I set because when I open the page for the first time, the default is to select the bottom one. Value=3, which is the bottom one. When the page is opened for the first time, the initial selected value cannot be obtained. So we have to create a variable and give it the value added to the bottom by default
data:{
Processing:'3',
items: [
{
value: '1', name: '自行处理',},
{
value: '2', name: '送医'},
{
value: '3', name: '其他'},
]
},
The third step is to write the radioChange:function(e) method in js.
This method will receive the value value every time the page clicks on the single selection. I put the received value value into the variable set in advance.
//设置单选value
radioChange:function(e){
var that = this;
that.setData({
Processing:e.detail.value
})
}
After that, we call that.data.Processing every time we use it, and we can get the value passed every time.
