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 相关文章推荐
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
Angular2安装angular-cli
May 21 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
puppeteer库入门初探
Jan 09 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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
实例讲解PHP表单验证功能
2019/02/15 PHP
Javascript简单实现可拖动的div
2013/10/22 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python用for循环求和的方法总结
2019/07/08 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
法律七进实施方案
2014/03/15 职场文书
情人节寄语大全
2014/04/11 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
中秋节慰问信
2015/02/15 职场文书
2016年国培研修日志
2015/11/13 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android