微信小程序--特定区域滚动到顶部时固定的方法


Posted in Javascript onApril 28, 2019

项目要求:

微信小程序--特定区域滚动到顶部时固定的方法

如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样。
以下是代码展示:

 1.wxml

<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
  <view class="{{top>130 ? 'topnav' : ''}}">
  <--这里写大于130,表示距离顶部130rpx时固定,可根据需要修改-->
    ...
  </view>
</scroll-view>

2.wxss

.topnav{
  position: fixed;
  top: 85rpx;
  z-index:99;
  background: #fff;
  width: 100%;
}

3.js

data = {
 top:0
}
//控制回到顶部按钮的显示与消失
scrollTopFun(e){
  let that = this;
  that.top = e.detail.scrollTop;
  that.$apply();
}

其实整个思路很简单, 小程序自带的组件scroll-view自带有属性bindscroll(滚动时触发)。通过这个属性获取浏览器滚动条距离顶部的位置,通过这个位置判断class类的显示就可以了。

以上所述是小编给大家介绍的微信小程序--特定区域滚动到顶部时固定的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
详解vue更改头像功能实现
Apr 28 #Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 #Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 #Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 #Javascript
详解微信小程序调用支付接口支付
Apr 28 #Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 #Javascript
使用webpack编译es6代码的方法步骤
Apr 28 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
JQuery for与each性能比较分析
2013/05/14 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python模块搜索路径代码详解
2018/01/29 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
一套C++笔试题面试题
2012/06/06 面试题
《与象共舞》教学反思
2014/02/24 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
初中英语课后反思
2014/04/25 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书