微信小程序-监听屏幕滚动
一、效果:
功能描述:监听屏幕滚动,实现向下滚动时搜索框和分类选项置顶,向上滚动页面恢复原样。
二、实现:
运用页面Page()函数中的onPageScroll方法,来监听屏幕滚动的距离。
1).js中:
data:{scrollTop:0,
},//监听屏幕滚动 判断上下滚动onPageScroll: function (ev) {this.setData({scrollTop: ev.scrollTop})},
2).wxml页面中:
- hidden属性来控制局部的显示与隐藏
- 三元操作符
- 顶部固定
<!--轮播图--><view class="container-top" hidden="{{scrollTop>178?true:false}}">........</view><!--搜索--><view class="collect-top {{scrollTop>178?'addClass':''}}">......</view>
/*搜索框置顶**/
.addClass{position:fixed;top:0px;
}
微信小程序-监听屏幕滚动相关推荐
- 微信小程序监听屏幕上滑下滑事件
需求是在list页中带有搜索框,下滑时隐藏顶部输入框,上滑时显示输入框,提高一点点用户体验.避免想要搜索就必须上滑至顶部.. 实现: 首先输入框得固定在顶部. wxml:class="sea ...
- 微信小程序监听 watch方法
微信小程序监听 watch方法 使用过vue框架的应该使用过watch监听变量 那么 在微信小程序中 怎么使用watch 首先我们需要引入一个watch.js文件到我们的全局中 // 监听页面数据变化 ...
- 微信小程序 监听位置信息
wx.onLocationChange(function callback) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram ...
- 微信小程序监听服务器发送消息,微信小程序实时聊天WebSocket
本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js ...
- 微信小程序监听实时地理位置变化事件接口申请
监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground.wx.startLocationUpdate使用. 申请开通 暂只针对国内主体如下类目的小程序开放, ...
- 微信小程序--监听对象属性变化
本以为小程序会跟vue差不多有像watch一类的方法,好吧并没有.百度了很多,看了很多大神写的案例.奈何天资不太行,虽然效果有了,但还是不太懂. app.js //监听属性值函数watch:funct ...
- 微信小程序监听app.js中的globalData属性,
// app.js中 //app.js App({onLaunch: function () {let that = this// 在这里用定时器模拟网络请求的过程setTimeout(functio ...
- 微信小程序 监听手势滑动切换页面
1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bin ...
- 微信小程序 —— 监听网络状态
在app.js的onLaunch wx.onNetworkStatusChange((res) => {if(!res.isConnected){console.log(res.isConnec ...
最新文章
- (转载)IP,主机名,域名
- tableau必知必会之学做时尚的环状条形图(跑道图)
- 「前端」History API与浏览器历史堆栈管理
- c汇编语言程序框架培训,[010][x86汇编语言]学习用户程序的编写(c08.asm)
- 100条经典C笔试题
- python虚拟环境中安装diango_python项目部署之 django虚拟环境
- 银河麒麟 安卓nginx_银河麒麟Kydroid 2.0全新发布:原生支持海量安卓APP
- Python3.x的print()输出问题
- 谁“杀死”了杀毒软件
- Android 动画
- 【转】100项PPT制作技术
- word文档属性自定义_如何在Word文档中插入内置和自定义高级属性
- linux 打印进程日志,Linux系统日志管理:(2)进程统计日志
- Michael喜欢滑雪百这并不奇怪(记忆化搜索)
- 在这领工资,一辈子别想取媳妇了!
- Linux 硬件加速 开源人脸识别引擎SeetaFace:第二步在ZedBoard上运行
- topcoder赚钱的方法
- 中国古代哲学书籍目录
- darknet yolov4 python接口测试图像
- 注意力机制详解系列(一):注意力机制概述
热门文章
- 【计息日期】国债逆回购类产品的起息日期和兑付日期,如何用python优雅实现?~
- 服务端基础设施开发----整合thumbnailator编写图片插件
- iOS 解决scoryboard上tableview、collection view顶部有空白问题
- 京东回应淘汰员工,这是要过冬节奏?
- 圣墟 第一百二十九章 异类直播
- 爱智会平台荣膺2018全球物联网大会最佳数字会务服务伙伴奖
- python猜大小游戏,Python实现的摇骰子猜大小功能小游戏示例
- CUTEFTP 权限的修改 之CuteFTP问题 修复CUTEFTP unable to transfer
- kingcms常用标记
- 区块链在司法存证领域的应用报告 | 陀螺研究院