实现的需求如下:
index.wxml:
<view class="container">
<scroll-view scroll-y="true" style="height:100vh;overflow:hidden;background-color:#fff;" scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}">
<radio-group bindchange="radioChange">
<label wx:for="{{deviceList}}" wx:key="value" class="device-list">
<view>{{item.name}}</view>
<view>
<radio value="{{item.value}}" checked="true" />
</view>
</label>
</radio-group>
</scroll-view>
</view>
index.wxss:
.container{
width: 100vw;
height: 100vh;
}
.device-list{
box-sizing: border-box;
padding: 26rpx 6%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
}
index.js:
Page({
data:{
deviceList:[
{value: 'USA', name: '美国'},
{value: 'CHN', name: '中国', checked: 'true'},
{value: 'BRA', name: '巴西'},
{value: 'JPN', name: '日本'},
{value: 'ENG', name: '英国'},
{value: 'FRA', name: '法国'},
]
},
radioChange(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
const deviceList = this.data.deviceList
for (let i = 0, len = deviceList.length; i < len; ++i) {
deviceList[i].checked = deviceList[i].value === e.detail.value
}
this.setData({
deviceList
})
}
})