微信小程序导航栏滑动定位功能示例(实现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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
详解小程序云开发数据库
May 20 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
vant 中van-list的用法说明
Nov 11 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+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python调用百度语音识别api
2018/08/30 Python
详解Python中的测试工具
2019/06/09 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
Python如何读写CSV文件
2020/08/13 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
文秘专业应届生求职信范文
2013/11/14 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
教师自我评价范文
2013/12/16 职场文书
预备党员承诺书
2014/03/25 职场文书
班级读书活动总结
2014/06/30 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL