微信小程序仿APP section header悬停效果怎么实现
微信小程序仿APP section header悬停效果怎么实现
本篇内容介绍了“微信小程序仿APP section header悬停效果怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
首先写一个非常简单列表:
wxml代码
<viewclass='header'>这里是header</view><viewclass='section-header'>这是section-header</view><blockwx:for="{{testData}}"><viewclass='section-cell'>{{item}}</view></block>
wxss代码
.header{height:300rpx;width:750rpx;background-color:bisque;margin-bottom:10rpx;}.section-header{height:80rpx;width:750rpx;background-color:rebeccapurple;}.section-cell{height:180rpx;width:750rpx;background-color:gold;margin-top:10rpx;}
简单列表效果.png 那我们要怎么样让头部悬停呢?
1、我们需要在页面布局完成后获取到头部的位置:
在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离
注意是 此时,这个后面再讲
/***页面加载完成*/onReady:function(){letthat=thisletquery=wx.createSelectorQuery()query.select(".section-header").boundingClientRect(function(res){//console.log(res)that.setData({//sectionheader距离‘当前顶部’距离sectionHeaderLocationTop:res.top})}).exec()},
2、我们需要监听页面滚动:
fixed用来控制是否悬停
/***页面滚动监听*/onPageScroll:function(e){//console.log(e)this.setData({scrollTop:e.scrollTop})if(e.scrollTop>this.data.sectionHeaderLocationTop){this.setData({fixed:true})}else{this.setData({fixed:false})}},
3、修改相应的样式:
将原来的header修改为如下代码,并添加一个placeholder视图,目的是当我们的section-header视图悬停时,保持占位,避免页面抖动
<viewclass='{{fixed?"section-headersection-fixed":"section-header"}}'>这是section-header</view><viewhidden='{{!fixed}}'class="section-headersection-placeholder"></view>
增加wxss代码
.section-placeholder{background-color:white;}.section-fixed{position:fixed;top:0;}
附上js data 代码:
data:{testData:[1,2,3,4,5,6,7,8,9,10],//sectionheader距离‘当前顶部’距离sectionHeaderLocationTop:0,//页面滚动距离scrollTop:0,//是否悬停fixed:false},
这个有一个要注意的点,我们在使用swlectorQuery()的时候,获取到的top是当前调用改函数时相应节点对应当前顶部的距离,这就有一个问题,当我们的header的高度(不一定是header只要是section-header上面的视图的高度)发生变化的时候,悬停就会有问题,因为我们的高度是最开始的时候获取的。
所以在我们改变高度之后,要再次调用该函数去获取距离"当前顶部"的距离,这也是要注意的一个点,如果我能直接再次获取并赋值,发现还是有问题,就是因为此时获取的top不是距离整个page页面顶部,而我们监听的页面滚动却是,所以我们可以修改代码如下:
letthat=thisletquery=wx.createSelectorQuery()query.select(".section-header").boundingClientRect(function(res){//console.log(res)that.setData({//sectionheader距离‘当前顶部’距离sectionHeaderLocationTop:res.top+that.data.scrollTop})}).exec()
加上此时页面滚动的距离,则能保证我们预期的效果出现
“微信小程序仿APP section header悬停效果怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站,小编将为大家输出更多高质量的实用文章!
推荐阅读
-
php获取发送给用户header信息的方法
-
php百万数据导出csv方式
˂?phpset_time_limit(0);ini_set(‘memory_limit’,‘128M’);$fil...
-
服务端主动推送消息SSE PHP+js
1、php服务端代码˂?phpheader('X-Accel-Buffering:no');header('Con...
-
php开发之跳转页面的几种方法
PHP中实现页面跳转有一下几种方式,看了几个人写的不是很条理,自己整理一下在PHP脚本代码中实现例如页面会立即...
-
PHP 重定向代码
-
修改php实际操作之一,对页面中的基本认识
由于要对php作一些二次开发,所以对一些过程作下记录.基本认识:{template‘_header’}1.daoDa...
-
小程序时代,珠宝品牌如何拥抱微信生态
-
微信小程序如何实现走马灯式抽奖
-
微信小程序怎么实现tabBar底部导航
-
微信小程序怎么实现前台循环数据绑定
微信小程序怎么实现前台循环数据绑定本文小编为大家详细介绍“微信小程...