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


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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
详解JavaScript树结构
Jan 09 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 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编写和读取XML的几种方式
2013/01/12 PHP
php while循环得到循环次数
2013/10/26 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php的ajax简单实例
2014/02/27 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python从Oracle读取数据生成图表
2020/10/14 Python
材料采购员岗位职责
2013/12/17 职场文书
自荐信需注意事项
2014/01/25 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
志愿服务心得体会
2016/01/15 职场文书
Python中常见的导入方式总结
2021/05/06 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL