css3设置滚动监听,小程序滚动监听,并动画控制某元素的显示隐藏

2022年05月10日 阅读数:14
这篇文章主要向大家介绍css3设置滚动监听,小程序滚动监听,并动画控制某元素的显示隐藏,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

场景:css

当页面滚动高度超过元素1高度时,元素2(动画的)显示或隐藏。小程序

在小程序中如何作到滚动监听并动态获取元素高度呢?api

在开发者工具中预览效果函数

30bb823d7895

f0g2j-tutqz.gif工具

解决思路:动画

1.在页面渲染完成后(onReady函数里) 去获取元素1在页面上距离顶部的高度fixedTop;this

2.用监听页面滚动函数 onPageScroll获得当前页面滚动高度,注意,这里获得的高度是“页面在垂直防线已滚动的距离(单位px)” ;3d

如上动图可知,元素1距离页面顶部的高度 = 页面已滚动的距离 + 一个平面的高度xml

用wx.getSystemInfo得到设备信息,其中设备的屏幕高度字段为res.screenHeight生命周期

具体解决过程:

咱们先来看看不考虑现实隐藏的效果的实现过程

.js文件

/**

* 监听用户滑动页面事件--返回页面在垂直方向已滚动的距离(单位px)

*/

onPageScroll(e){

let isfixed = 0

if(parseInt(e.scrollTop) + parseInt(this.data.screenHeight) > this.data.fixedTop) isfixed = 1

else isfixed = 0;

this.setData({isfixed });

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

let query = wx.createSelectorQuery();

query.select('#notic').boundingClientRect(res => { //获取元素1距离页面顶部高度

this.setData({

fixedTop: res.top

})

}).exec()

wx.getSystemInfo({ //获取屏幕高度

success: (res => {

this.setData({

screenHeight: res.screenHeight

})

})

})

},

.wxml 文件

附近更多活动(我是元素2)

动态的控制isfixed,就能够控制到元素2的显示隐藏啦。

注意一点, wx.createSelectorQuery()获取元素的top值是指元素的margin以外的开始计算的。这里我给 元素2 设置了50的margin,为了计算的精确性,咱们应该高度判断的语句减去 元素2 的margin值,例如 if(parseInt(e.scrollTop) + parseInt(this.data.screenHeight) - 100 > this.data.fixedTop) isfixed = 1

下面来看看是怎么加显示隐藏的动画的。

实现方法:用小程序的动画api实现 或 css过分实现

下来来看具体实现过程:

30bb823d7895

animation.png

附近更多活动(我是元素2)

上图(animation.png)能够看到,先是建立一个动画函数opacityAnimate,而后在onPageScroll函数中当知足条件时调用该0动画函数,咱们给动画传一个为1的值,而css的opacity: 1时即透明度为0,即元素显示。而条件不知足时传0,元素透明,即不显示。

在wxml文件中,动画用animation属性来绑定,如上的wxml代码。

这里我同时用了wx:if 和 animation ,从前面咱们知道wx:if就能够控制元素的显示隐藏,只是想要看到过分效果,因此后面加了animation动画。那么这里可不可只写animation来控制显隐呢,答案是能够的,可是animation咱们控制的是元素的透明度,元素隐藏只是透明度为0,元素其实是还在的。这种状况下,若是元素中绑定了事件,点击到透明的元素,同样会触发到绑定事件,因此以防万一仍是用wx:if和animation同时控制稳当些。

方法2. 用css过分实现

在控制元素的opacity属性时,能够给元素加一个transition过分属性,看起来就有个动画效果不会那么生硬了。

具体实现以下:

30bb823d7895

transition.png

wx:if="{ {isfixed}}"

class="btn"

style="transition: all 0.3s;opacity: { {isfixedShow ? 1 : 0}};"

>附近更多活动(我是元素2)

用transition来过分一个元素的opacity时要注意一点,,这个元素必须是先存在的,而后再去控制opacity。如上例子,

wxml文件中,元素同时用来isfixed 和 isfixedShow两个字段来控制。

js文件中(红框部分)isfixedShow是根据isfixed变化后的100ms后才变换的,为何要延迟呢?其实延迟多长时间能够本身酌情控制,这里想说的是“一个元素的opacity的属性想用transition来过分时,这个元素必须是先存在的”,即先有这个元素(isfixed为true) ,而后再去控制元素的透明度opacity的值。