小程序多选搜索

最新推荐文章于 2021-07-27 22:54:03 发布

原创

最新推荐文章于 2021-07-27 22:54:03 发布 · 671 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序搜索 #小程序搜索多选 #小程序多选

本文介绍了如何在小程序中实现多选搜索功能。通过展示WXML和JS代码，讲解了如何处理点击事件以实现选中和取消选中，并支持用户进行多项选择。

直接上代码

要求：点击选中，再次点击以后取消选中，并且支持多选。

WXML：

<view class="{
  
  {item.flg?'nav-active':''}}" bindtap='screen' wx:for="{
  
  {mark}}" wx:key="index" data-index='{
  
  {index}}'>{
  
  {mark[index].mark}}</view>

JS：

data:{
    mark: [{ id: "1", mark: "拿本快", flag: "1", create_time: "2019-07-10", flg: false },
         { id: "2", mark: "教练负责", flag: "1", create_time: "2019-07-12", flg: false },
         { id: "3", mark: "合格率高", flag: "1", create_time: "2019-07-10", flg: false },
         { id: "4", mark: "环境好", flag: "1", create_time: "2019-07-12", flg: false },
         { id: "5", mark: "教练技术硬", flag: "1", create_time: "2019-07-12", flg: false },
         { id: "6", mark: "规模大", flag: "1", create_time: "2019-07-12", flg: false