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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 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
菜鸟修复电子管记
2021/03/02 无线电
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
介绍Python中内置的itertools模块
2015/04/29 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
夜不归宿检讨书
2014/02/25 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
怎样写观后感
2015/06/19 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技