微信小程序实现滚动吸顶

1.实现效果

2.实现原理

方法一：position:sticky简单粗暴，但存在部分机型不支持

1.position:sticky( position: -webkit-sticky):
类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

eg：

.box{position: sticky;position: -webkit-sticky;top: 0;
}

方法二：监听页面滚动onPageScroll，可能会存在卡顿

onPageScroll：监听页面滚动，避免在 onPageScroll 回调中每次都调用 setData。

eg：

onPageScroll: function (e) {let scrollTop = parseInt(e.scrollTop)；//滚动条距离顶部高度}

3.实现代码

方法一：在需要吸顶的页面整体元素添加position: sticky;

position: sticky;
position: -webkit-sticky;
top: 0;

方法二：在onPageScroll中去动态判断当前距离顶部高度的状态

onPageScroll: function (e) {let scrollTop = parseInt(e.scrollTop),//滚动条距离顶部高度isFixed = scrollTop >= this.data.navTopif (this.data.isFixed !== isFixed) {this.setData({isFixed,});}}

完整代码

<!--pages/wxCase/sticky/index2.wxml-->
<view class="head_title"><view class="mb20">方法一：position: sticky，简单粗暴，存在部分机型不支持，<navigator url="/pages/wxCase/sticky/index">去查看</navigator></view><view>方法二：监听页面滚动onPageScroll，存在卡顿</view>
</view>
<view class="hd {{isFixed&&'fixed'}}" id="nav"><block wx:for="{{navList}}" wx:key="navList"><view class="hd_flex {{nav_type == index ? 'hd_flex_on' : ''}}" catchtap="changeType" data-index="{{index}}">{{item}}</view></block>
</view>
<view class="content"><block wx:for="{{nav_type==0?20:nav_type==1?0:4}}" wx:key="list"><view>{{index+1}}</view></block>
</view>

/* pages/wxCase/sticky/index2.wxss */
.head_title {background: #EECDA3;background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);background: linear-gradient(to right, #EF629F, #EECDA3);height: 300rpx;color: #fff;font-size: 25rpx;padding: 20rpx;box-sizing: border-box;
}
.hd {width: 100%;height: 88rpx;line-height: 88rpx;display: flex;background: #fff;margin-bottom: 10rpx;box-shadow: 0rpx 5rpx 5rpx #ccc;/* 方法一：滚动吸顶 *//* position: sticky;position: -webkit-sticky;top: 0; */
}
.hd .hd_flex {flex: 1;text-align: center;font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #333333;
}
.hd .hd_flex_on {font-size: 30rpx;background-clip: text;-webkit-background-clip: text;/* 规定背景的绘制区 */color: transparent;background-image: -webkit-linear-gradient(to right, #EF629F, #EECDA3);background-image: linear-gradient(to right, #EF629F, #EECDA3);position: relative;transition: 0.3s all linear;transition-delay: 0.1s;
}
.hd .hd_flex::after {content: "";position: absolute;bottom: 4rpx;width: 0%;height: 6rpx;background-image: -webkit-linear-gradient(to right, #EF629F, #EECDA3);background-image: linear-gradient(to right, #EF629F, #EECDA3);border-radius: 3rpx;left: 50%;transform: translateX(-50%);
}
.hd .hd_flex_on::after {width: 40%;transition: 0.3s width linear;
}
.content view {background: #fff;height: 50rpx;line-height: 50rpx;border-bottom: 1rpx solid #eaeef1;padding: 20rpx;color: #999;text-align: center;
}
.fixed {position: fixed;left: 0;top: 0;z-index: 999;
}

// pages/wxCase/sticky/index2.js
Page({data: {navList: ['正在进行', '即将开始', '已结束'],nav_type: 0,isFixed: false,navTop: 0, //距离顶部距离},changeType: function (e) {let {index} = e.currentTarget.dataset;if (this.data.nav_type === index || index === undefined) {return false;} else {this.setData({nav_type: index,})}},onLoad: function (options) {},onReady: function () {if (this.data.navTop == 0) {//获取节点距离顶部的距离wx.createSelectorQuery().select('#nav').boundingClientRect((rect) => {if (rect && rect.top > 0) {this.setData({navTop: parseInt(rect.top)});}}).exec();}},/*** 监听页面滑动事件*/onPageScroll: function (e) {let scrollTop = parseInt(e.scrollTop),//滚动条距离顶部高度isFixed = scrollTop >= this.data.navTopif (this.data.isFixed !== isFixed) {this.setData({isFixed,});}}
})

4.更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序实现滚动吸顶相关推荐

微信小程序中实现吸顶效果(流畅、不卡顿)
欢迎访问我的个人博客最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传 ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
微信小程序搜索框吸顶效果实现
业务场景主页要做一个搜索框,滑动主页页面的时候,搜索框始终位于导航栏下面,位置不变,不随页面的滑动而滑动,这种效果被称为"吸顶"效果. 点击搜索框,弹出上层搜索详情的视图层,搜索 ...
微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
微信小程序实现滚动到指定位置
微信小程序的按钮点击后滚动到页面内的指定位置. wxml内容 <view class="box1" bindtap="toComment">查看回答 ...
range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
微信小程序弹窗滚动穿透问题
解决点击穿透在原生中使用el.addEventListener("touchstart", () => { console.log("ok"); }, ...

微信小程序实现滚动吸顶

1.实现效果

2.实现原理

方法一：position:sticky简单粗暴，但存在部分机型不支持

方法二：监听页面滚动onPageScroll，可能会存在卡顿

3.实现代码

方法一：在需要吸顶的页面整体元素添加position: sticky;

方法二：在onPageScroll中去动态判断当前距离顶部高度的状态

完整代码

4.更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序实现滚动吸顶相关推荐

最新文章

热门文章