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


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 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
elementUI select组件使用及注意事项详解
May 29 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 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
mysql 搜索之简单应用
2007/04/27 PHP
php 无限分类的树类代码
2009/12/03 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP会话处理的10个函数
2015/08/11 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python 拼接文件路径的方法
2018/10/23 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
拓展培训心得体会
2014/01/04 职场文书
安全生产活动月方案
2014/03/09 职场文书
借款协议书
2014/09/16 职场文书
继承权公证书范本
2015/01/23 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers