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


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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
vue-router 控制路由权限的实现
Sep 24 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
DISCUZ 分页代码
2007/01/02 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php中file_exists函数使用详解
2015/05/08 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
js 居中漂浮广告
2010/03/21 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
Python实现抢购IPhone手机
2018/02/07 Python
pandas 空数据处理方法详解
2019/11/02 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
高二化学教学反思
2014/01/30 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
单位工作证明书格式
2014/10/04 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
画展邀请函
2015/01/31 职场文书
2015年小学开学寄语
2015/02/27 职场文书
幼儿园见习总结
2015/06/23 职场文书
《称赞》教学反思
2016/02/17 职场文书