小程序多选功能列表点击选中并高亮显示

index.wxml

<view wx:for="{{list}}" wx:key="id" data-id="{{item.id}}" bindtap="handleItemClick" class="{{item.selected ? 'selected' : ''}}">
  {{item.name}}
</view>

index.js

Page({  
 data: {
    list: [
      { id: 1, name: '选项1', selected: false },
      { id: 2, name: '选项2', selected: false },
    ],
  },

  handleItemClick(event) {
    const { id } = event.currentTarget.dataset;
    const list = this.data.list.map(item => ({
      ...item,
      selected: item.id === parseInt(id),
    }));
    this.setData({ list });
  },
  
  handleSubmit() {
    const selectedItems = this.data.list.filter(item => item.selected).map(item => item.id);
    wx.request({
      url: 'http://localhost:3000/submit-selected',
      method: 'POST',
      data: { selectedItems },
      success(res) {
        console.log('提交成功', res.data);
      },
      fail(err) {
        console.error('提交失败', err);
      },
    });
  },
});

index.wxss

.selected {
  background-color: #ff0;
}

后端实现

虽然这个问题主要关注前端实现，但如果你需要将选中项的数据发送到后端进行处理（例如保存或提交），你还需要在后端进行相应的处理。

1. ‌接收数据‌：
   在后端，你需要一个接口来接收前端发送的选中项数据。例如，在Node.js中，你可以使用Express框架来创建一个POST接口：

const express = require('express');
const app = express();

app.use(express.json());

app.post('/submit-selected', (req, res) => {
  const selectedItems = req.body.selectedItems;
  // 在这里处理选中项数据，例如保存到数据库
  res.send({ status: 'success' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});