微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)


Posted in Javascript onJanuary 24, 2019

本文实例讲述了微信小程序导航栏滑动定位功能。分享给大家供大家参考,具体如下:

实现的效果

微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

实现的原理

1. 通过对scroll的监听获取滚动条的scrollTop值;

2. 在导航的class判断scrollTop;

3. 切换position:fixed与position:relative。

WXML

<view style="height:100%;position:fixed;width:100%;">
 <scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;">
  <view class="page-bottom-content">
   <text>{{text}}</text>
  </view>
  <view class="page-banner">
   banner
  </view>
  <view class="page-group {{scrollTop > 360 ? 'page-group-position' : ''}}">
   <view class="page-nav-list"><text>首页</text></view>
   <view class="page-nav-list"><text>活动</text></view>
   <view class="page-nav-list"><text>菜单</text></view>
   <view class="page-nav-list"><text>我的</text></view>
  </view>
  <view class="goods-list">
   goods-list
  </view>
 </scroll-view>
</view>

WXCSS

.page-banner{height: 500rpx;background-color: greenyellow;padding: 20rpx;color:#fff;}
.page-group{
 display: table;
 background-color: blueviolet;
 width: 100%;
 table-layout: fixed;
 position: relative;
 top: 0;
 left: 0;
}
.page-group-position{
 position: fixed;
}
.page-nav-list{
 padding:30rpx 0 ;
 display: table-cell;
 text-align: center;
 color: #fff;
}
.goods-list{
 height: 2000rpx;
 background-color: green;
 padding: 20rpx;
 color:#fff;
}

JS

Page({
 data: {
  scrollTop: null
 },
 //滚动条监听
 scroll: function (e) {
  this.setData({ scrollTop: e.detail.scrollTop })
 },
})

总结:

1. 要获取scrollTop,在微信小程序中我们需要:<scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;"></scroll-view>

2. 微信小程序要绑定bindscroll事件,需要绑定在scroll-view组件上,同时设置scroll-y和height。

3. 如果scroll-view的高设置100%,就需要在其外层添加一个固定高的盒子,否则监听不会生效。

4. 通过scroll事件获取scrollTop:this.setData({ scrollTop: e.detail.scrollTop })

5. 导航栏class的切换:

scrollTop > 360 ? 'page-group-position' : ''

实质:

scrollTop > 360 ? 'fixed' : 'relative'

缺点:

1. 由于有获取scrollTop的过程,所以会出现定位不及时,也就是导航闪动的效果;
2. 没有原生CSS3的position:sticky流畅,体验比较差;
3. 由于我目前还未找到直接获取page-group的offsetTop方法,所以直接采用的是360固定值,此效果是在苹果6进行的测试。

此效果只是提供一个思路,不建议使用在项目中,体验太差,有待优化。如果有更好思路的大神,敬请指教。

Demo源码:

点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
jQuery DOM操作实例
Mar 05 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
JS中字符串trim()使用示例
May 26 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
vue 巧用过渡效果(小结)
Sep 22 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 #Javascript
记一次vue去除#问题处理经过小结
Jan 24 #Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 #Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 #Javascript
vue车牌号校验和银行校验实战
Jan 23 #Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 #Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 #Javascript
You might like
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
项目实践之javascript技巧
2007/12/06 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
js输出列表实现代码
2010/09/12 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
出国签证在职证明
2014/09/20 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
新闻稿标题
2015/07/18 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android