微信小程序滑动悬停

最新推荐文章于 2025-07-08 11:27:21 发布

原创

最新推荐文章于 2025-07-08 11:27:21 发布 · 7.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#滑动悬停 #滑动悬浮

这篇博客讲述了如何在微信小程序中实现滑动列表时的悬停效果。作者通过监听onPageScroll事件，动态调整元素CSS，使指定区域在滑动时保持固定位置。在实现过程中，为避免切换定位时的闪烁问题，对相邻元素也进行了相应的样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图1

图2

最近有个小需求，需要在滑动列表的时候，让图1中红线框部分悬停，变成图2。对于我这个前端小白，想了一下，大体思路是这样：通过系统的onPageScroll方法，监听滑动，在适当时机改变视图的css. 代码如下：

 
  //监测滑动，进行view悬停 
 
   onPageScroll: 
  function (e) { 
   
  if (e.scrollTop > 
  0) {

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

oik_ios

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序实现悬停效果的实现笔记

weixin_46420789的博客

11-03

2078

想要上滑页面,土黄色的区域悬停在屏幕顶部. 实现思路:在没有滑动到顶部时,正常流式布局,当土黄色悬停块到顶时设置为position:fixed;top:0,固定在顶部,同时因为脱离文档流所以下方内容会突然顶到屏幕上方被悬停块遮挡一部分,所以使用一个隐藏view,宽高与悬停块一样,即可正常显示 wxml代码: <view class="top">不用管我</view> <view class="{{isFixed ? 'stop_top stop' : 'stop_top'}}.

Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动

leafseelight的专栏

08-26

707

运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息，即节点距离页面顶部的距离，再通过uniapp原生监听页面滚动事件onPageScroll，获取页面内容滚动的高度，二者相加即定位到对应节点的滚动距离。Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动。欢迎关注我的公众号，打开右下角小程序，万部短剧搜索。微信搜索【蜜蜂网盘搜so】小程序，万部短剧搜索。微信搜索【蜜蜂网盘搜so】小程序，万部短剧搜索。1.页面template结构。

5 条评论您还未登录，请先登录后发表或查看评论

微信小程序开发必备：页面滑动与滚动视图组件全解析

热门推荐

wisdom605768292的专栏

01-03

2万+

在使用scroll-view时遇到一个问题，当scroll-view的内容超过一屏时，往下滑动，scroll-view很大几率会卡死，一旦卡死,怎么下滑都没用，需要等几秒钟(这几秒钟内不能继续做下滑操作)，scroll-view自然恢复,这时候再下滑又是OK的，有没有朋友遇到这个坑，怎么解决？ 微信小程序 scrollview 卡顿我也是各种测试，最后锁定了这行代码

微信小程序-scroll-view滚动到指定位置（类似锚点）

03-29

本文作者：莫兰迪不会没有瓶子，来自原文地址先来说一下官网例子吧 API 自己看咯 ...(此图片来源于网络，如有侵权，请联系删除! ) 有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~ ...scroll-view竖向滚动...

详解微信小程序实现跑马灯效果（附完整代码）

10-17

微信小程序是一种轻量级的应用开发平台，允许开发者构建在微信内运行的小程序。在本文中，我们将探讨如何在微信小程序中实现跑马灯效果，这是一种常见的动态视觉效果，通常用于展示滚动字幕或滚动广告。跑马灯效果...

微信小程序scroll-view滑动卡顿，下滑时向上滑动失效

weixin_45720604的博客

05-31

6899

微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现wxml文件js文件滑动卡顿 微信小程序scroll-view组件在滑动时频繁卡顿，向下滑动时，向上滑动无效，无法停止。小程序向下滑动惯性卡顿。解决方案 scroll-view开启了enable-fresh。判断当前scroll位置，如果不在第一页则关闭enable-refresh，在第一也才开启。代码实现 wxml文件 <scroll-view scroll-y="true" class="scroll" bindscroll=

微信小程序的scroll-view不能滚动问题

qq_36356379的博客

03-23

1万+

最近搞了一个多周的微信小程序算是入门了吧，因为之前自学过js和css，所以上手比较快，语法跟VUE挺像的，下面说说期间遇到的一些问题吧。一、scroll-view没有显示全，但是不能滚动确定你想实现的滑动方向，检查一下scroll-x或者scroll-y有没有写(scroll-x:true 支持横向滑动 scroll-y:true 支持竖向滑动) 检查一下是不是没有给scroll-vie...

ios系统微信小程序scroll-view划不动的问题

每天都记录一点点！

02-04

5974

这段时间开发个微信小程序的点餐系统，因为只需要小程序版本，所以就用原生的小程序写了，过程中遇到了几个问题和坑，就总结一下，方便来后者。商品分类和商品列表的左右联动，像美团和饿了么那样的交互，点击某个分类滑动到对应的商品列表，随意滑动商品列表商品分类也会做对应的切换，我个人的实现方案如下：要用到scroll-view的to-view属性每个商品的高度都是固定的，所以要开始计算好每个类目对应的商品列表的高度，在滑动商品的时候实时获取scrollTop,然后再让商品分类列表做对应的切换主要代码如下：

【小程序】scroll-view在ios机型滚动不流畅

lily19970107的博客

11-27

1351

这个问题不是滚动补流程的问题，是scrollView高度设置的有问题，因为项目是自定义navbar和tabbar，scrollView的高度应该设置为windowHeight-navbarHeight-底部的padding,有的页面没有就可以减底部的padding。可以为scrollView设置。

小程序 view下拉滑动导致scrollview滑动事件失效

LlanyW的专栏

08-05

868

小知识2：为什么touchmove和touchend不需要更改为使用capture-bind绑定呢，这个我试了一下，会导致scroll-view滑动事件和touchmove事件冲突,然后你滑动scroll-view组件时你添加了touchmove的那个元素(这是是scroll-view的父元素)也会动。下拉时滑动，展示整个会员卡内容，下拉view里包含了最近播放：有scrollview，加了下拉功能后，scrollview滑动失败了。滚动视图滑动正常了。

uniapp/微信小程序 scroll-view 设置scroll-x 失效问题解决

随时发疯！

03-30

2820

实现一个横向滑动的scrollview，直接给scroll-view设置 scroll-x ，但是并没有实现想药实现横向滑动的效果，先看代码。

【已解决】uni-app scroll-view 上滑卡顿，记录一下

刘现在的博客

02-29

2366

最近在研究uni-app,开发一个app,其中使用了scroll-view,在安卓手机（机器比较老）或者模拟器上滑动，均会出现卡顿，颤抖的问题。scroll-view上的scroll 事件去掉即可。

微信小程序中 scroll-view 组件小bug的解决

weixin_42559087的博客

05-16

1644

在做微信小程序的时候,常常会在类似如下的分类页面中使用的scroll-view组件: 但是会遇到一个小小的问题,就是在右侧详细商品页面滑到底部或者是非顶部的时候,你如果切换左边的tab栏,你会发现右边的页面显示的时候没有从顶部开始显示. 这时候就需要在 scroll-view 这个标签中使用 scroll-top="{{rightScrollTop}}" Page({ data:{ // 左边分类的当前索引 activeIndex: 0, // 用于右侧滚动到顶部的值,默认是0

小程序按月份查询账单

qq_43050084的博客

10-18

2465

按月份查询账单预览效果思路1.获取**当前时间**2.转换起止时间的时间格式（时间戳转字符串）3.获取数据（传参）4.页面渲染5.导航渲染预览效果思路一般后台接口会提供你两个查询参数：startDate和endDate 那么怎样用这两个参数做一个漂亮的账单页面呢？ 1.获取当前时间 ```javascript var YEAR = util.formatYear(new Date())...

微信小程序 原生时间选择器月份范围几月至几月封装组件父子组件

weixin_58346650的博客

06-13

1736

效果如图所示需求分析：默认显示当前年份1月到1月选择月份上面的文字随之变化年份-获取1900年到现在月份-第一列月份12个月所以选择第二个月份随着第一个选择而变化大于第一个选择的月份 ...

vue移动端项目实现顶部悬停（顶部吸附）效果

weixin_41611170的博客

02-25

1531

项目是最近一个移动端的vue项目，需要实现一个滑动超过导航栏实现顶部悬停效果，方法比较麻烦思路是监听外层盒子滑动高度，达到一定高度改变需要悬停盒子的定位，再滑回去是重新重置定位需要注意的是移动端盒子高度的适配问题代码如下：外层盒子监听方法绑定 <div class="shopBaby" ref="shopBaby" @scroll="getScroll">  .... </div> 悬停盒子 <div clas.

微信小程序左划删除组件：性能优化与实现简析

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。同时，它也能够实现消息通知、线下支付等功能，具有丰富的组件及API，可以方便地完成各种开发...