微信小程序实现吸顶效果


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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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
关于时间计算的结总
2006/12/06 PHP
初级的用php写的采集程序
2007/03/16 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP进程通信基础之信号
2017/02/19 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
Vue封装的组件全局注册并引用
2019/07/24 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
numpy数组广播的机制
2019/07/12 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
创业计划书的内容步骤和要领
2014/01/04 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
《恐龙》教学反思
2014/04/27 职场文书
体育之星事迹材料
2014/05/11 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
《中彩那天》教学反思
2016/02/24 职场文书