微信小程序之滑动页面隐藏和显示组件功能的实现代码


Posted in Javascript onJune 19, 2020

用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现。往上滑动时,按钮消失。往下滑动时,按钮出现。

今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置。

效果图:
滑动前:

微信小程序之滑动页面隐藏和显示组件功能的实现代码

滑动后:

微信小程序之滑动页面隐藏和显示组件功能的实现代码

此功能是往上滑动消失,往下滑动出现。

实现步骤:

  • 编写页面代码与样式
  • 编写逻辑代码

wxml:

<view class="mask-con {{!hidden ? 'mask-con-show' : ''
}
}
sendDynamic" bindtap="sendDynamic">
  <image class="sendDynamic mask-con 
	{
	{
	!hidden ? 'mask-con-show' : ''
	}
	}
	" src="cloud://hualibiaobaiqiang-1omla.6875-hualibiaobaiqiang-1omla-1302418355/me_icon/发布.png">
	</image>
</view>

wxss:

.sendDynamic{
 height: 100rpx;
 width: 100rpx;
 bottom:100rpx;
 right: 60rpx;
 border-radius: 50%;
 position: fixed;
 box-shadow:5rpx 5rpx 5rpx #fccee5;
}
.mask-con{
 transition: 0.5s; 
 position: fixed;
 width: 100rpx;
 height: 100rpx;
 bottom:-100rpx;
 right: 60rpx;
 text-align: center;
 line-height: 100rpx;
 }
.mask-con-show{
 bottom: 100rpx;
}

js:

data: {
 hidden:false,
 scrollTop: 0
 },
 onPageScroll(ev){
 var _this = this;
 if (ev.scrollTop <= 0) {
  ev.scrollTop = 0;
 } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
  ev.scrollTop = wx.getSystemInfoSync().windowHeight;
 }
 if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
  this.setData({
  hidden:true
  })
 } else {
  this.setData({
  hidden:false
  })
 }
 setTimeout(function () {
  _this.setData({
  scrollTop: ev.scrollTop
  })
 }, 0)
 },

以上简单三步,完成目标。

总结

到此这篇关于微信小程序之滑动页面隐藏和显示组件功能的实现代码的文章就介绍到这了,更多相关小程序滑动页面隐藏和显示组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
优化Jquery,提升网页加载速度
Nov 14 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js跳转页面方法总结
Jan 29 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
微信小程序收藏功能的实现代码
Jun 19 #Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 #Javascript
微信小程序返回上一级页面的实现代码
Jun 19 #Javascript
小程序中的箭头函数的具体使用
Jun 19 #Javascript
在VUE style中使用data中的变量的方法
Jun 19 #Javascript
You might like
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python实现的计算器功能示例
2018/04/26 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
介绍一下#error预处理
2015/09/25 面试题
中学教师管理制度
2014/01/14 职场文书
初中美术教学反思
2014/01/29 职场文书
军训考核自我鉴定
2014/02/13 职场文书
说明书范文
2014/05/07 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
合作经营协议书范本
2014/09/16 职场文书
自查自纠整改报告
2014/11/06 职场文书
市场督导岗位职责
2015/04/10 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python