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


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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
深入解读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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
动手学习无线电
2021/03/10 无线电
javascript 伪数组实现方法
2010/10/11 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
python安装以及IDE的配置教程
2015/04/29 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
使用Python pip怎么升级pip
2020/08/11 Python
Python 列表反转显示的四种方法
2020/11/16 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
大学英语专业求职信
2014/06/21 职场文书
会计系毕业求职信
2014/08/07 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2014教师评职称工作总结
2014/11/10 职场文书