uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果


Posted in Javascript onDecember 10, 2020

前言

实现思路:通过小程序API中的触摸事件,配合CSS来实现元素的显示和隐藏。ps(也想过另一种通过监听页面滚动的方式来实现,不过效果一定很差0.0)

一、需要用到的事件touchmove、touchend

uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

二、话不多说上代码

1.看需求,如果是整个屏幕滑动后元素发生变化,最好放在最外面的view

代码如下:

<view class="container" @touchmove="handletouchstart" @touchend="handletouchend">
 <view class="column popupfx" :class="specClass" @click="createHaibao">我是要发生变化的元素</view>
</view>

JS代码如下:

data() {
  return {
   specClass: 'hide',
     };
   },
methods:{
 handletouchstart() {
  this.specClass = 'show';
 },
 handletouchend() {
  this.specClass = 'hide';
 },}

CSS代码如下:

<style lang="scss">
 
.popupfx {
    position: fixed;
    top: 80%;
    right: 20upx;
    z-index: 10;
  
    &.show {
        animation: showLayer 0.2s linear both;
    }
  
    &.hide {
        animation: hideLayer 0.2s linear both;
    }
  
    @keyframes showLayer {
      0% {
        transform: translateX(0%);
      }
  
      100% {
        transform: translateX(80upx); //这里可以通过变大变小调整偏移量
      }
    }
  
    @keyframes hideLayer {
      0% {
        transform: translateX(80upx);
      }
  
      100% {
        transform: translateX(0);
      }
    }
  }
</style>

总结 以上就是滑动页面之后对元素显示和隐藏动画的实现,本人学艺不精,想跟大家分享一下,欢迎高手指导。

到此这篇关于uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果的文章就介绍到这了,更多相关小程序滑动页面显示和隐藏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
js实现产品缩略图效果
Mar 10 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
js实现列表按字母排序
Aug 11 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
微信小程序实现天气预报功能(附源码)
Dec 10 #Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 #Javascript
微信小程序反编译的实现
Dec 10 #Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 #Javascript
关于小程序优化的一些建议(小结)
Dec 10 #Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
You might like
图象函数中的中文显示
2006/10/09 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python数据类型详解(四)字典:dict
2016/05/12 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python如何调用php文件中的函数详解
2020/12/29 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
一份Java笔试题
2012/02/21 面试题
一个SQL面试题
2014/08/21 面试题
理工学院学生自我鉴定
2014/02/23 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
面试自我评价范文
2014/09/17 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python