钉钉小程序多行列表 实现单选代码
时间: 2024-02-26 18:58:27 浏览: 21
可以参考以下代码实现钉钉小程序多行列表的单选功能:
```
<view class="list">
<view wx:for="{{list}}" wx:key="index" class="item" bindtap="selectItem" data-index="{{index}}">
<view class="left">
<view class="radio {{item.checked ? 'checked' : ''}}"></view>
</view>
<view class="right">
<view class="title">{{item.title}}</view>
<view class="desc">{{item.desc}}</view>
</view>
</view>
</view>
// js代码
Page({
data: {
list: [
{title: '选项1', desc: '描述1', checked: false},
{title: '选项2', desc: '描述2', checked: false},
{title: '选项3', desc: '描述3', checked: false},
{title: '选项4', desc: '描述4', checked: false},
],
},
selectItem(e) {
const index = e.currentTarget.dataset.index;
const list = this.data.list;
list.forEach((item, i) => {
if (i === index) {
item.checked = true;
} else {
item.checked = false;
}
});
this.setData({
list: list,
});
},
});
```
代码中,通过 `wx:for` 循环渲染列表项,每个列表项包含一个左侧的单选框和右侧的标题和描述信息。当用户点击某个列表项时,触发 `selectItem` 方法,将当前选中项的 `checked` 属性设置为 `true`,同时将其他项的 `checked` 属性设置为 `false`,从而实现单选的效果。