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


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 相关文章推荐
javaScript使用EL表达式的几种方式
May 27 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
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如何写APP接口详解
2016/08/23 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python实现RSA加密(解密)算法
2016/02/17 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python列表推导式入门学习解析
2019/12/02 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
七一表彰活动方案
2014/01/18 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
公司寄语大全
2014/04/10 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
教学反思怎么写
2016/02/24 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Python进度条的使用
2021/05/17 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫