个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
27
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
实现思路：通过小程序API中的触摸事件，配合CSS来实现元素的显示和隐藏。ps（也想过另一种通过监听页面滚动的方式来实现，不过效果一定很差0.0） 。
1.看需求，如果是整个屏幕滑动后元素发生变化，最好放在最外面的view 。
代码如下:
|
1
2
3
|
<view class=
"container"
@touchmove=
"handletouchstart"
@touchend=
"handletouchend"
>
<view class=
"column popupfx"
:class=
"specClass"
@click=
"createHaibao"
>我是要发生变化的元素</view>
</view>
|
JS代码如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
data() {
return
{
specClass:
'hide'
,
};
},
methods:{
handletouchstart() {
this
.specClass =
'show'
;
},
handletouchend() {
this
.specClass =
'hide'
;
},}
|
CSS代码如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<style lang=
"scss"
>
.popupfx {
position
:
fixed
;
top
:
80%
;
right
:
20
upx;
z-index
:
10
;
&.
show
{
animation: showLayer
0.2
s linear
both
;
}
&.
hide
{
animation: hideLayer
0.2
s linear
both
;
}
@keyframes showLayer {
0%
{
transform: translateX(
0%
);
}
100%
{
transform: translateX(
80
upx); //这里可以通过变大变小调整偏移量
}
}
@keyframes hideLayer {
0%
{
transform: translateX(
80
upx);
}
100%
{
transform: translateX(
0
);
}
}
}
</style>
|
总结 以上就是滑动页面之后对元素显示和隐藏动画的实现，本人学艺不精，想跟大家分享一下，欢迎高手指导.
到此这篇关于uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果的文章就介绍到这了,更多相关小程序滑动页面显示和隐藏内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://blog.csdn.net/weixin_41586715/article/details/110927302 。
最后此篇关于uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果的文章就讲到这里了,如果你想了解更多关于uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
27
4
0
这是在我的 MainActivity 中用作 BroadcastReceiver 的代码 mRegistrationBroadcastReceiver = new BroadcastRecei
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我想在大部分时间隐藏 UISearchBar，只在用户需要时调用它来显示。 我在 Interface Builder 中放置了一个 UISearchBar 并将其隐藏在 View 后面，当用户单击按钮
我有一个包含 CCMenuItemImage 的菜单(“myMenu”)。我希望此菜单能够检测手指滑动并相应地滑动。 我的问题是 CCMenuItemImage 似乎吸收了触摸事件。当用户触摸 CCM
我正在寻找一个简单的 jQuery 或 Javascript 解决方案，以使导航侧边栏在用户向下滚动页面时顺利跟随用户。像这里一样:http://ucon-acrobatics.com/shop/ 任
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
我想将 String 行标记化为标记(存储到 String 表中)，并且我只能使用 java.io.*它是为了实现一个计算器。 例如:第一行:1+2+3第二行:1+ 2*3(标记之间有空格) 进入表{
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
我有一个导航栏，当单击菜单图标时，它将滑入“#secondary-nav”并隐藏“#primary-nav”。然而 jquery 似乎没有显示“#secondary-menu”。下面提供的是 HTMl
这个问题已经有答案了: how to make a sliding up panel like the Google Maps app? (2 个回答) 已关闭 7 年前。 我正在寻找类似的实现，如下
我有 ViewPager(Slide) 和 3 张图片。共有三个图像是通过 Internet 下载的。如果我将图片换到服务器上的另一台服务器上，链接保持不变，但应用程序中的图片没有改变，仍然是缓存中的
我在 gridview 中创建了两个按钮。 我想达到以下目的，但不知道应该用什么方法？ 首先我触摸第一个按钮，将显示 toast 1 msg。通过将我的手指滑到第二个按钮而不抬起我的手指，将显示 to
所以我设置了一个小的 jquery 动画，用户将鼠标悬停在容器上一段时间，这会导致容器 split ，然后显示内部信息。 我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动
这个问题在这里已经有了答案: Simulate swipe with mouse in javascript (5 个答案) 关闭 7 年前。
我希望我的 Sprite 像在冰上一样滑动。因此，如果他在地面上，那么他可以正常行走，但当他接触冰时，他会滑动，直到有东西阻止他。有谁知道如何才能做到这一点？谢谢 最佳答案 像“Sprite Move
我的代码有几个问题:HTML: Bellevue
我正在尝试实现从 fragment1 过渡到 fragment2 的滑动动画。我正在使用 setCustomAnimations 方法。而且我知道我需要使用框架方法来替换 fragment 。 我的代
我不知道你们是否听说过 app chomp，但应用程序中有一个布局，如下图所示。我想知道他们是如何设置的，我将如何使用它来为我自己的应用程序制作类似的东西。有趣的是，当你滑动时，没有像水平 Scrol
我想检测用户何时在一个单元格占据整个屏幕宽度的 collectionView 中向左或向右滑动。是否可以不添加手势识别器。我试过添加手势识别器，但只有当我们将 collectionView 的 scr
我正在尝试开发一个应用程序来复制类似 tinder 的基于滑动的提要。该应用程序的想法与火种非常相似，也具有向右滑动和向左滑动匹配功能。 到目前为止我做了什么-我在 MongoDB 中创建了一个刷卡集
我是一名优秀的程序员,十分优秀！