微信小程序view的折叠与展开_微信小程序列表页第一个展开其他的收缩

在做隐藏view之前，我们可以先来了解一下微信小程序视图层的事件。

官方文档 事件 | 微信开放文档

什么是事件？

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

事件的使用方式

• 在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

• 在相应的 Page 定义中写上相应的事件处理函数，参数是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

        首先我们先创建一个view，它需要包裹两个子view：一个为我们触发事件并可视的view ，另一个为隐藏的view。当我们点击可视的view，则会在下面弹出隐藏的view。 

WXML

 WXSS

js 

我们可以在控制台看到showIndex的值的变化 

如果想要添加多个隐藏的view，只需要更改可视view中的data-index的值，还有隐藏view的showIndex的值