小程序制作平滑滚动展开效果,并且不需要写死flex布局的固定高度.提高小程序逼格的动画.类似Ant Design的Collapse折叠面板

传统的小程序,展开和折叠其实很简单,小程序本身是以数据驱动的理念渲染的,控制数据即可.但是为了用户体验,那种点一下页面就弹开没有任何效果过度的,简直不忍直视.

页面结构:

card-box //列表容器card //一行一个元素line1默认展示的内容line2默认隐藏的内容,可以展开,可以被折叠line3展开和隐藏的按钮

也就是说,card-box中有很多的card

card是默认就展示一些信息,当展开的时候会显示更多的信息,然后scroll-view中的其他的card自动排列位置

当展开和关闭的时候,整个card会有动画效果,其他的元素老老实实呆着,该往下移或者往上走的时候,自动排列.

效果如下,实际比这个流畅,转换到gif以后就变味道了. 如果需要源码的,请联系我发给你

先说一下需要注意的问题.

1.前期写界面的时候为了看到效果.我们可能用到min-height的css,但是如果是做可展开可折叠的选项卡的时候,这个参数要慎用.不然会导致flex布局的错乱.

2.卡片元素要设置flex布局的两个参数   

style="overflow: hidden; white-space: normal"

以保证通过animation的height函数设置卡片的总高度的时候,超出的部分不显示,不过不用担心,等待动画结束后,该高度就是最终正确的高度.只是为了在动画过程中隐藏不要显示的内容.如果不设置这两个参数,点击展开以后,所有的子元素行都会显示出来,然后外边框的card元素一个幽灵一样的卡片边框在那傻愣愣的变换高度.

3.如果多个卡片在scroll-view中,卡片是使用wx:for来遍历展示的,那么这个card的animation属性设置的时候一定要做判断,只有当前点击的card才展示动画效果,不然动画效果其实就是在改变元素的高度,所有wx:for符合遍历条件的元素的高度都会跟着一起变化

所以这里设置了

animation='{{currentCardIndex==itemIndex?animation:null}}'

currentCardIndex是在js文件中定义的一个记录当前点击的展开合并的元素是哪个,然后itemIndex是wx:for-index定义的名字为itemIndex的变量.当他们两个一样的时候,渲染的时候就会用到animation,不符合这个条件的就不渲染动画.当然也不会改变高度.

4.技术的关键是在scroll-view中,创建js文件中的元素以外,再加了一个card.这个card就是用于计算高度的.要把他的position属性设置为fixed,一定.然后再把他进行变换移动到屏幕外,这样就能保证我们虽然看不到他,但是利用他计算了我们点击展开关闭的那个card的各个css样式信息.所以,这个card也要跟scroll-view正常遍历循环的card的wxml写的样式信息一样,不然算出来的信息不会一样的.

再来说一下做他的目的:

如果你有一个标签卡的集合容器  scroll-view,他是可以滚动的,里面是一些card,你可以理解为你的数据的一行.这个一行默认的时候就展示一些标准的信息.然后你点击展开详情的时候,不想跳转到别的页面,就在这个页面中展开他的详细信息,然后其他的元素跟着往后排.

也就是说类似于 可扩展行.或者你想象一下,微信朋友圈,有的信息就会被折叠,当你点击展开的时候,下面的一条朋友圈的开始位置就自动往下移动,但是你会发现微信朋友圈并没有这个展开和折叠的动画.如何让他的打开方式更美观一点呢?这就是我做这个的目的.

再来说一下实现思路和踩的坑.

最开始的思路,我是想通过wxml中,view元素(我定义的card,也就是你可以理解的一行,未来可以扩展显示的一行)中的style设置他的height信息.但是,这不符合css和wxml完全独立的干净利落的规矩.如果到时候你这个card的样式发生了改变,你会在改了css以后还要改一下wxml的这个特殊的style,那么这个项目维护起来就乱套了.

css中,我们通常遇到各个子元素才会设置高度,至于他外层的都不会设置的,都是让子元素自动的撑开父窗口.

如果用这个方式的话,js中要"灵活"的计算这个height的高度,css中要设置一些默认的高度,wxml中还要再设置height为js中产生的数据.虽然这么做,只有js和css中会有高度信息,但是js中如果这种写死的代码用来控制样式信息,显然搞的很乱.

坑是:你设置了这个card的高度,animation才会生效,不然,animation使用height的方法,没有动画效果.这个在小程序社区中有很多人反映,那最初你要设置这个card的高度是多少? 100? 120? 什么单位? rpx, px % ? 这些信息应该由card内的子元素决定才对.所以如果你当时写好了height,看起来没问题,animation你要设置到目标高度是多高? 这些都是我遇到的问题,后来总结也是不可取的.要想灵活,多用变量,不要写死太多东西.

而且你设置了wxml里面这个card的高度的话,在你点击展开关闭按钮的时候,通过获取这个card的方法获取他的高度的话,获取到的高度是死的. 本来你100px高度(设置在wxml中),你认为你点击了展开后,他会是300吗? 错了.你获取到的是100px,因为这个你写死了,除非你去掉

              style="overflow: hidden; white-space: normal"

但是如果你去掉了,你点了展开后,当执行完了setdata的话,高度变成300了,这时候你再设置动画已经没有用了.人家都已经从100变成300了,你中间100--->300的动画效果就没地方加了.

然后又一次,我想到,我就是想要用你展开的高度和合并后的高度,我获取到了以后,就可以动画设置了,但是你不展开我又不知道你有多高,你展开了我又加不了动画,怎么办? 我展开你的时候,我先让你的双胞胎展开,你双胞胎展开了以后,我就知道你应该是多高,

知道你有多高,我再让你慢慢展开.

思路来了.

我当前点击的card,我先让他模拟展开一下,当然不是让他自己本身展开,我在scroll-view中,排在所有元素的最后,并且在<已加载全部>这样的字样前面,放置一个card的模板,他里面是没有数据的,当点击要展开的元素的时候,把这个card的模板通过setdata设置数据,

设置完了数据他的高度自然就更新了.这时候通过setdata的回调函数 使用wx.createSelectorQuery创建的query来查找那个card的模板元素,我看他多高,我就让我点击的这个元素多高.

所以核心代码就在这里了.

//当用户点击收起或者是展开的按钮的时候onClickShowHidBtn :function (e)