微信小程序实现吸顶效果


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面象对象设计
Apr 28 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
webpack之devtool详解
Feb 10 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
javascript self对象使用详解
2016/10/18 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
详解python持久化文件读写
2019/04/06 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
事业单位请假制度
2014/01/13 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
财务会计专业自荐书
2014/06/30 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
精神病医院见习报告
2014/11/03 职场文书
立项申请报告范本
2015/05/15 职场文书
招商银行工作证明
2015/06/17 职场文书
中学教师读书笔记
2015/07/01 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python