微信小程序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

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

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

微信小程序view的折叠与展开相关推荐

微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
微信小程序 view的文本自动换行了的问题（scroll-view）/微信小程序 view换行跟不换行的解决方案
今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width ...
微信小程序view标签hover-class属性和text标签selectable和decode属性
微信小程序view标签hover-class属性和text标签selectable和decode属性 <view hover-class="hc">按下样式</v ...
image 微信小程序flex_微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml flex-direction: row 1 2 3 flex-direction: column ...
微信小程序view水平垂直居中完美解决
微信小程序view水平垂直居中完美解决 .view_box{display: flex;align-items: center;justify-content: center;width: 100%; ...
微信小程序 view样式
参考链接: (1)微信小程序View的布局 https://www.jianshu.com/p/862dfa698523 微信小程序样式众多,这里介绍最为常用的view 小程序 View 支持两种布局 ...
微信小程序view动态长度_微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】...
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 >我是view标签,我现在的宽度是{{v ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
微信小程序——View背景设置
微信小程序的的view背景可以通过本地和网络两种方式: 网络: background-image: url('http://img6.bdstatic.com/img/image/smallpic/P ...

微信小程序view的折叠与展开

微信小程序view的折叠与展开相关推荐

最新文章

热门文章