微信小程序实现吸顶效果


Posted in Javascript onJanuary 08, 2020

最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层。

微信小程序实现吸顶效果

后面就对代码进行了调整,避免不停的去setData

效果图

吸顶前

微信小程序实现吸顶效果

吸顶后

微信小程序实现吸顶效果

代码部分

wxml

<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>
<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>


<view class="navbar-wrap">
 <view class="column {{isFixedTop?'fixed':''}}" id="navbar">
  <view class="block active">新品推荐</view>
  <view class="block">限时优惠</view>
  <view class="block">火爆热搜</view>
  <view class="block">猜你喜欢</view>
 </view>
 <!-- 用于吸顶后 占位用的 -->
 <view class="column" wx:if="{{isFixedTop}}"></view>
</view>


<block wx:for="{{20}}" wx:key="list">
 <view style="width: 100%; height: 120rpx; background: #f0f0f0; margin: 20rpx auto;"></view>
</block>

wxss

view, text {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

.navbar-wrap {
 width: 100%;
}

.navbar-wrap .column {
 width: 100%;
 height: 80rpx;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-around;
 background: #fff;
 border-bottom: solid 1px #eee;

 top: 0;
 left: 0;
 z-index: 100;
}

.navbar-wrap .column.fixed {
 position: fixed;
}

/* 以下的代码不重要 */

.navbar-wrap .column .block {
 width: 25%;
 height: 80rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 30rpx;
 color: #333;
 letter-spacing: 1px;
 position: relative;
}

.navbar-wrap .column .block::after {
 content: "";
 width: 60%;
 height: 3px;
 border-radius: 2px;
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 background: transparent;
}

.navbar-wrap .column .block.active {
 color: #1490ce;
 font-weight: bold;
}

.navbar-wrap .column .block.active::after {
 background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);
}

js

Page({
 data: {
  navbarInitTop: 0, //导航栏初始化距顶部的距离
  isFixedTop: false, //是否固定顶部
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function() {
  var that = this;

  if (that.data.navbarInitTop == 0) {

   //获取节点距离顶部的距离
   wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {
    if (rect && rect.top > 0) {
     var navbarInitTop = parseInt(rect.top);
     that.setData({
      navbarInitTop: navbarInitTop
     });
    }
   }).exec();

  }
 },

 /**
  * 监听页面滑动事件
  */
 onPageScroll: function(e) {
  var that = this;
  var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度

  //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
  var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
  //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
  if (that.data.isFixedTop === isSatisfy) {
   return false;
  }

  that.setData({
   isFixedTop: isSatisfy
  });
 }


})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
JS实现吸顶特效
Jan 08 #Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 #Javascript
electron+vue实现div contenteditable截图功能
Jan 07 #Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 #Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 #Javascript
微信小程序服务器日期格式化问题
Jan 07 #Javascript
webpack 最佳配置指北(推荐)
Jan 07 #Javascript
You might like
PHP图片上传类带图片显示
2006/11/25 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php生成验证码函数
2015/10/20 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
在python中做正态性检验示例
2019/12/09 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
中学生团员自我评价分享
2013/12/07 职场文书
企业精神口号
2014/06/11 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
会议新闻稿
2015/07/17 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
JavaScript的Set数据结构详解
2022/02/18 Javascript
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis