微信小程序——列表项实现单选功能

最新推荐文章于 2025-01-16 17:18:46 发布

原创最新推荐文章于 2025-01-16 17:18:46 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

此代码示例展示了如何在微信小程序中使用`<radio-group>`和`<scroll-view>`实现选项滚动选择。当用户选择一个选项时，程序会更新所有选项的选中状态，并将视图滚动到所选选项。`radioChange`函数处理选择事件，`deviceList`包含了选项数据。

实现的需求如下：
在这里插入图片描述
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
    })
  }
})