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

前言

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

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

二、话不多说上代码

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开发小程序实现滑动页面控制元素的显示和隐藏效果的文章就介绍到这了,更多相关小程序滑动页面显示和隐藏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uniapp,微信小程序中使用 MQTT的问题

    最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说明 MQTT的js文件:mqtt.min.js 先上一点注意事项: (1)MQTT.js 一个 MQTT 协议的客户端库,用 JavaScript 编写,可用于 Node.js 和浏览器.在 Node.js 端可以通过全局安装使用命令行连接,同时还支持 MQTT ,MQTT TLS 证书连接:值得一

  • uniapp电商小程序实现订单30分钟倒计时

    本文实例为大家分享了uniapp实现订单30分钟倒计时的具体代码,供大家参考,具体内容如下 倒计时函数如下: // cm 参数是截至时间-当前时间 // 截至时间是后台返回的数据,当前时间通过new Date() 的方式进行获取 runBack(cm) { if (cm > 0) { // 如果时间是超过1分钟,则需要展示的样式是: x分x秒,如果是小于1分钟,则是 00分x秒 cm > 60000 ? (this.rocallTime = (new Date(cm).getMinutes()

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

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • uniapp微信小程序实现一个页面多个倒计时

    本文实例为大家分享了uniapp实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下 设计图(需求) 在这里插入图片描述 结构 <view class="group-list" v-for="item in message" :key="item.productId"> <view class="group-img" @click="navTo"> <image :src

  • 使用 UniApp 实现小程序的微信登录功能

    1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

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

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

    前言 实现思路:通过小程序API中的触摸事件,配合CSS来实现元素的显示和隐藏.ps(也想过另一种通过监听页面滚动的方式来实现,不过效果一定很差0.0) 一.需要用到的事件touchmove.touchend 二.话不多说上代码 1.看需求,如果是整个屏幕滑动后元素发生变化,最好放在最外面的view 代码如下: <view class="container" @touchmove="handletouchstart" @touchend="handl

  • uniapp开发小程序实现全局悬浮按钮的代码

    uniapp开发小程序实现全局悬浮按钮的代码

    目录 看效果 须知: 1.uni.getSystemInfoSync()获取手机的信息接口 2.uni.createSelectorQuery().in(this) 3.touchmove滑动事件 取出存储的值 赋值 全局注册组件 看效果 这是一个全局的按钮,可以换成图片,自己写样式,每个页面都有: 须知: 1.uni.getSystemInfoSync()获取手机的信息接口 可以拿到手机屏幕的宽高 2.uni.createSelectorQuery().in(this) uniapp中式没有w

  • 微信小程序使用uni-app开发小程序及部分功能实现详解

    微信小程序使用uni-app开发小程序及部分功能实现详解

    目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网络请求 1.依照官网提示安装.导入.使用 2.实战 四.uni-app 里面小程序分包 1.创建分包目录 2.在 pages.json 文件中配置 3.创建分包页面 五.公用方法封装 六.搜索功能 1.搜索组件 2.搜索建议实现 3.本地存储 4.过滤器 七.上拉加载.下拉刷新 1.上拉加载 2.下拉刷

  • uniapp开发小程序的经验总结

    uniapp开发小程序的经验总结

    1. 新建UI项目 首先,我们的UI是基于ColorUI,当ColorUI没有的样式,就基于Uniapp自带的UI.所以项目的开始要引入这两个UI框架. 如下,新建一个uni-ui项目. 再建立一个ColorUI项目. 如果需要观看ColorUI的效果以便直到自己需要用哪些组件,可以将其运行起来,如下. uni-ui同理.这样只要我们需要的样式都可以在这两个UI取材了. 2. 搭建自己的项目 新建一个自己的uniapp项目,建立完成后.项目结构如下. 接着先引入ColorUI样式: 将Color

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

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

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • 解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    目录 问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移 解决思路: 设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起

  • 微信小程序文章详情页面实现代码

    先自己绘制了一个丑陋的原型图,然后开始在小程序上绘制页面,然后设计样式,一路过来总结就是哪里不懂查哪里之旅~ 原型设计和分析 原型图效果 文章详情.png 为什么要这么设计? 正常情况下是设计先出设计图,然后服务器和我们一同讨论接口如何设计,然后根据服务器返回的结果,我们再去界面上显示.但是这里我们使用的是第三方的接口,所以只能他有什么我们显示什么了. 服务器接口返回的数据如下如: 小程序-服务器返回结果.png 分析 json 结果,我们这里为了简单,也就只显示几个元素分别是 时间,标题,类型

  • uni-app制作小程序实现左右菜单联动效果

    uni-app制作小程序实现左右菜单联动效果

    目录 前言 一.示意图 二.实现步骤与思路讲解 1.静态页面的布局 2.模拟数据格式 3.左侧菜单的点击效果 4.右侧菜单的联动效果 三.具体实现代码 1.页面结构 2.相关样式 3.业务逻辑部分 前言 今天写出了一个新的小玩意儿,个人认为实现思路与方法还算值得学习,在这里分享给大家! 一.示意图 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的. 二.实现步骤与思路讲解 1.静态页面的布局 页面的布局——在实现具体功能之前,我们就要考虑所要实现的具体功能是

随机推荐