如何在wxml循环遍历的节点中判断当前数值是否在数组中

最新推荐文章于 2025-10-12 11:06:36 发布

原创

最新推荐文章于 2025-10-12 11:06:36 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何在微信小程序中实现类似有赞vant-weapp的手风琴折叠面板效果，以及如何改造为点击展开一个，点击隐藏当前项的交互。通过给每一项增加唯一标识符，使用数组存储展开项的标识符，利用wx:show条件判断来控制内容的显示与隐藏。文章提供了详细的代码示例，包括模板、脚本和样式，展示了展开和隐藏的实现逻辑，并给出了实际运行的效果图。

笔者根据业务需求做了一个折叠面板（手风琴风格，即点击按钮只展示一个）
类似于有赞vant-weapp这种。
在这里插入图片描述
后来我看到有赞的基础风格（即点一个展开一个，点击隐藏只隐藏当前的），但不知道如何实现

所以我偷偷看了有赞的源码，了解了它的思想：给每一项增加唯一标识符，新建一个数组用于存放需要展开项的唯一标识符，在节点中判断数组中是否存在当前点击展开的标识符，存在则展开，隐藏则是出栈当前的标识符

微信小程序不支持像vue一样的`{ { arr.includes(id) }}`这种直接调用函数或者过滤器，需要用到微信脚本语言`wxs`，有了它妈妈再也不用担心我在wxml用不了过滤器和函数啦

话不多说看例子
在这里插入图片描述

这个是循环遍历出来的，我要求每点击一个查看更多展开当前项，如：

在这里插入图片描述

每点击一次隐藏详情，仅隐藏当前项

在这里插入图片描述

怎么实现呢¿

首先要确定需要隐藏的内容，将隐藏的内容包裹起来，根据条件判断让它显示，这里的条件就是：标识符数组里包含当前要展开的标识符arr是[]，我现在要展开了，就把当前要展开的标志符放进arr;[111, 222]说明要展开的只有111，222两个，即条件
在这里插入图片描述
怎么判断的¿就是上面wx:show的条件

我们可以直接在当前页面用`<wxs module = "m">`标签写，也可以单独创建文件夹在页面中`<wxs src="../../example" module = "m">`引进来，这个module必不可少

在这里插入图片描述
这里是新建文件写的，在页面中调用时，传入标识符数组，当前标识符，在标识符数组中找当前这个标识符，找到了返回true，没找到返回false,页面就是根据这个布尔值进行展开和隐藏的

贴代码

<template>
  <view class="container" style="height: {
   
   {mainHeight}}px">
    <view class="panel" wx:for="{
   
   {list}}" wx:key="index">
      <view class="flexDirection mb16 cell">
        <view class="item_text tl">姓名：</view>
        <view class="item_text tr" style="color: #242424">{
   
   {
   
   item.name || '暂无数据'}}</view>
      </view>
      <view wx