舒服的小程序吸顶动画

前言

今天想优化下用户体验：给小程序商品列表页顶部的标签栏增加个吸顶动画。逻辑是检测用户下滑行为时不吸顶，上滑时吸顶，标签栏未滑离视窗时不处理。并对滑动的处理方法增加节流处理，以优化性能。

一、处理页面滚动

1.1 页面逻辑

页面page_name.js：

// ...
onPageScroll(e){this.selectComponent('#goods_list').data._handleScroll(e)
}
// ...

因为业务需要，商品列表goods_list被我封装成组件形式，所以需要调用组件内的方法来处理。可能有人好奇，为什么组件方法名前有一般用来表示私有方法的下划线_，却还被外部调用，后面会进行说明。

1.2 商品列表逻辑

商品列表组件goods_list.js：

import utils from '../../utils/utils'
const HEIGHT_TAB = 70 // 标签栏的高度
// ...
options: {pureDataPattern: /^_/, // 纯数据字段的正则
},
data:{_scrollTop:0, // 页面滚动的距离_handleScroll:_ =>{}, // 防抖处理后的isSticky:false, // 标签栏是否是吸顶状态
},lifeTimes(){attached() {// 组件挂载时，设置处理滚动的函数this._setHandleScroll()},
},
methods(){_setHandleScroll() {this.data._handleScroll = utils.throttle(e => {const nextScrollTop = e.scrollTopconst prevScrollTop = this.data._scrollTopif (nextScrollTop > prevScrollTop) {this.setData({isSticky: false,})} else if (nextScrollTop < prevScrollTop && nextScrollTop > HEIGHT_TAB) {this.setData({isSticky: true,})}this.setData({_scrollTop: nextScrollTop,})},200,this)},
},
// ...

1.3 节流逻辑

utils.js：

/*** * @param fn 原函数* @param gapTime 间隔时间* @param context 上下文*/throttle(fn, gapTime, context) {let prev = Date.now()return function () {let args = argumentslet now = Date.now()if (now - prev > gapTime) {prev = nowfn.apply(context, args)}}}

tips:

小程序中，因为页面、组件上下文的关系，需要在方法内部设置防抖函数，如上文所示：attached时，赋值_handleScroll为处理函数（这里可以进一步展开讲，关于小程序的上下文和防抖节流的原理，后面可能会出一篇）；
为了性能考虑，对于不需要与渲染相关的data，用pureDataPattern匹配这些data，以减小页面的重绘repaint与回流reflow，在我的项目中此类data都是以_开头的，所以出现了前文中外部调用组件_开头方法的问题

二、吸顶动画处理

goods_list.wxml：

<!-- tab栏 -->
<view class="goods-tab {{isSticky ? 'sticky' :''}}"><viewwx:for="{{tabList}}"wx:key="sortStyle"class="item {{sortStyle === item.sortStyle ? 'active':''}}"bind:tap="clickTabItem"data-sort-style="{{item.sortStyle}}"><view class="title">{{item.title}}</view><view class="sub-title">{{item.subTitle}}</view></view>
</view>

goods_list.scss:

.goods-tab {display: flex;justify-content: space-between;align-items: center;padding: 30rpx 24rpx 20rpx 24rpx;background: #f8f8f8;transition: all 0.2s;z-index: 1003;position: sticky; // 动作前后position保持一致，有相同属性的变化才能有过渡动画top: -146rpx; // 标签栏离开视窗时的位置width: 750rpx;&.sticky {position: sticky;top: 0rpx;}// ...
}

舒服的小程序吸顶动画相关推荐

小程序吸顶tab 滚动监听
思路 position sticky 配合滚动监听锚点跳转自定义tab <bg-navigation-bar showBack="{{true}}"bgurl=" ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序登录页动画-云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 当我看到这张背景图的时候, ...
微信小程序没登录跳到登录页怎么做_微信小程序登录页动画怎么做
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放.微信小程序动画怎么做也受到越来越多人的关注,下面从多个方面来谈谈微信小程序怎么做的一些内容. 前言 2017年前端火了,微信小程序 ...
小程序启动页动画实现
微信小程序刚被加载时是有自己默认动画的,但是这个千篇一律.我们其实可以做个性化的加载,带来一点不一样的感觉.比如下面的例子: 小程序加载动画这个是怎么做的呢?使用的是wx.createAnimati ...
微信小程序带吸顶效果的导航栏
有时候做微信小程序商城的时候要做可以左右滑动又有吸顶效果的导航栏,最近刚做过一个,不多说直接上代码. .wxml <view class="limit_save fix-save&qu ...
小程序仿安卓动画滑动效果滑动动画效果实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 源码 var start_clientY; //记录当前滑动开始的值 var end_clientY ...
微信小程序学习做动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信扫码学习,在线指导微信小程序动画效果的实现
云顶之弈小程序置顶工具（附源码）
简介: 最近在玩云顶之弈总是看手机很不方便第三方的软件不是不靠谱就是数据更新慢就打算用易语言写一个官方助手的置顶工具 https://lol.qq.com/tft/#/index https: ...