微信小程序实现吸顶效果的方法实例

目录
  • 1. 实现方式
  • 2. 存在的问题
  • 3. 考虑是否有更好的实现方式
  • 总结

背景是做一个日期title随着用户滑动，当滑到当前日期list数据时，有一个吸顶效果，并且该效果与原来样式不一样

1. 实现方式

  • scroll-view为小程序原生组件
  • handleScroll为滑动时触发的事件
  • scroll-y表示在垂直方向上允许滑动
  • class为fixed的元素在这做固定定位在scroll-view容器的顶部用于显示当前滑动到的日期
  • 利用动态绑定class的方法去控制visibility的显示与否
  • class为scheduleDay的元素为每一个日期title
  • data-value的值绑定为该日期

  • 该函数为处理每一个scheduleDay元素距离scroll-view顶部与当前日期的数据
  • 集合成一个数据如下所示以此类推
  • wx.createSelectorQuery()使用方法具体参考(一般用于获取某个元素节点的位置信息)
  • developers.weixin.qq.com/miniprogram…
scheduleInfo:[
    {
       top: 8,
       currentDay: '2021-08-15'
    },
    {
       top: 213,
       currentDay: '2021-08-14'
    },
    {
       top: 555,
       currentDay: '2021-08-13'
    },
    ...
]

  • e.detail.scrollTop为在scroll-view组件中滑动的距离
  • 当 滑动高度 >= 某个元素节点距离scrollview顶部的距离 时 设置当前滑动到的日期
  • 然后控制固定定位的元素出现或隐藏即可实现

本文对于css就不做过多展示，逻辑思路对了即可实现功能效果

2. 存在的问题

  • 由于handleScroll滑动事件触发的频率有误差，导致在滑到最上方时并没有隐藏fixed的元素
  • 上拉时fixed元素与原本该位置的日期title会有不好的ui体验效果
  • 参考下图

该图为默认情况下的ui显示

用户滑动至该日期下的list位置时的ui显示，或者是⬆️存在的问题的第一点会出现的情况

然后会影响⬆️存在的问题的第二点的情况

3. 考虑是否有更好的实现方式

最开始考虑是动态给每一个元素节点的日期title加上相应的class去控制单独样式的改变情况，但是每一个元素的class都相同，无法使用该方式去解。

通过控制每一个单独元素节点的样式去修改，但是小程序不像浏览器中存在DOM可以去通过dom.style.xxx去改变每一个单独元素的样式。

IntersectionObserver，该方法也尝试过，但没有成功，有机会再尝试一下。

总结

到此这篇关于微信小程序实现吸顶效果的文章就介绍到这了,更多相关小程序吸顶效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序实现吸顶效果

    微信小程序实现吸顶效果

    最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层. 后面就对代码进行了调整,避免不停的去setData 效果图 吸顶前 吸顶后 代码部分 wxml <view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>

  • 小程序自定义模板实现吸顶功能

    小程序自定义模板实现吸顶功能

    本文实例为大家分享了小程序实现吸顶功能的具体代码,供大家参考,具体内容如下 //如图所示----这里用了自定义组件实现了小程序吸顶功能 //WXML <view class="i-sticky-demo"> <i-sticky scrollTop="{{scrollTop}}"> <i-sticky-item i-class="i-sticky-demo-title"> <view slot="

  • 微信小程序实现列表滚动头部吸顶的示例代码

    本文介绍了小程序头部吸顶的实现代码示例,分享给大家,也给自己留个笔记 demo 地址: https://github.com/iotjin/Jh_weapp 效果图: 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position

  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    本文实例为大家分享了微信小程序实现吸顶特效的具体代码,供大家参考,具体内容如下 效果图 wxml代码: <view class="xiding {{oneFixed}}" id="tab"> <van-row custom-class="goods_row" > <van-col span="12" custom-class="title-1"> 食疗方法 </va

  • 微信小程序wxs实现吸顶效果

    在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟), 所以使用wxs响应事件来实现吸顶效果.wxs响应事件基础库 2.4.4 开始支持,低版本需做兼容处理. 附上文档链接:wxs响应事件 吸顶效果 使用scroll-view组件实现滚动效果,页面和scroll-view组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在

  • 微信小程序实现吸顶效果的方法实例

    微信小程序实现吸顶效果的方法实例

    目录 1. 实现方式 2. 存在的问题 3. 考虑是否有更好的实现方式 总结 背景是做一个日期title随着用户滑动,当滑到当前日期list数据时,有一个吸顶效果,并且该效果与原来样式不一样 1. 实现方式 scroll-view为小程序原生组件 handleScroll为滑动时触发的事件 scroll-y表示在垂直方向上允许滑动 class为fixed的元素在这做固定定位在scroll-view容器的顶部用于显示当前滑动到的日期 利用动态绑定class的方法去控制visibility的显示与否

  • 微信小程序实现吸顶盒效果

    微信小程序实现吸顶盒效果

    本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码,供大家参考,具体内容如下 html部分  <!-- 列表 -->     <view class="partner-content-container mt15">         <!-- 吸顶盒 -->         <view class="partner-list-header {{isFixedTop?'tab-fixed':''}}" id='operat

  • springboot+jwt+微信小程序授权登录获取token的方法实例

    springboot+jwt+微信小程序授权登录获取token的方法实例

    目录 前言 配置 XcxAuthenticationProvider XcxAuthenticationToken 小程序授权登录 前言 我们有时候在开发中,遇到这样的问题,就是我们需要小程序授权登录我们自己的后台,通过小程序的信息换取我们自己后台的token,实现账号密码.小程序授权登录的多种登录方式. 配置 在 SecurityConfig文件中配置 XcxAuthenticationProvider public class XcxAuthenticationProvider implem

  • 微信小程序与后台PHP交互的方法实例分析

    微信小程序与后台PHP交互的方法实例分析

    本文实例讲述了微信小程序与后台PHP交互的方法.分享给大家供大家参考,具体如下: 接下来将讲后台如何与前台进行数据及图片之间的交互,相信这一点是很多人所关注的,因为当时我实在团队中负责后台开发,因此对前端不是特别了解,这里我会贴出前端开发时的部分代码截图,微信小程序的官方api介绍地址是: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-network.html 微信与后台服务器之间的数据通信是调用wx.request(OBJECT)实现的,官

  • 微信小程序中使用 async/await的方法实例分析

    本文实例讲述了微信小程序中使用 async await的方法.分享给大家供大家参考,具体如下: 微信小程序中有大量接口是异步调用,比如 wx.login().wx.request().wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success().fail() 和 complete() 作为异步调用不同情况下的回调. 但是,以回调的方式来写程序,真的很伤,如果有一个过程需要依次干这些事情: wx.getStorage() 获取缓存数据,检查登录状态 wx.getSe

  • 微信小程序中正确使用地图的方法实例

    微信小程序中正确使用地图的方法实例

    目录 前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市 总结 前言 今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方

  • 微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

  • 微信小程序左滑删除效果的实现代码

    微信小程序左滑删除效果的实现代码

    今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个

随机推荐