笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

uniapp 电商小程序置顶特效/分享特效/红包特效简单实现效果_uniapp特效动画

作者：笔触狂放9 | 2024-03-22 01:01:02

踩

uniapp特效动画

uniapp 电商小程序首页特效展示效果

首页特效视频

电商小程序首页动效

回到顶部（置顶）特效
分享特效
红包特效

回到顶部特效

在这里插入图片描述
要求：页面一开始是隐藏置顶按钮，页面上拉加载，如果滚动距离超过一屏幕的高度时，显示置顶按钮。

知识点：

获取手机屏幕高度
监听手机滚动的距离

获取手机屏幕高度

uniapp getSystemInfo方法使用文档：
getSystemInfo
在这里插入图片描述

uni.getSystemInfo({
    success: res => {
		this.phoneHeight = res.windowHeight;
	}
});
1
2
3
4
5

监听页面上拉滚动

我是在onShow中获取屏幕的高度，然后放在data中的phoneHeight参数中。
onPageScroll函数可以监听屏幕滚动，传递的参数为e,e.scrollTop参数就是页面滚动的距离。
这个距离是从屏幕顶部为0，基于这个基准，如果e.scrollTop数值超过phoneHeight,则代表此时已经翻页了，可以展示置顶按钮了。所以用this.toTopFlag参数来展示“置顶”图标的显示与隐藏。

onPageScroll(e){
	if(e.scrollTop > this.phoneHeight){
		this.toTopFlag = true;
	}else{
		this.toTopFlag = false;
	}			
}
1
2
3
4
5
6
7

分享特效

要求：如果页面滚动的时候，分享图标隐藏，如果页面没有滚动，分享图标显示。
知识点：

使用animate动画，隐藏与显示分享图标时，有动效。
监听页面滚动，如果延时函数0.5秒后页面没有滚动，则认定为滚动结束，可以显示分享图标。

animate动画中文官网：
animate动画中文官网

在这里插入图片描述
对于uniapp这种基于vue框架的编辑器，使用方法可以如下：
1）下载animate.css或者animate.min.css,放在static静态目录下
2）在App.vue文件中引入animate.css或者animate.min.css文件
3）在需要使用动画特效的组件中，写入 animated xxxx的类名即可

<view class="toShare animated" :class="onscroll?'slideOutRight':'slideInRight'">
	<button type="text" open-type="share" plain style="border:none;background:transparent;" class="shareBtn">
		<image src="http://58d.oss-cn-hangzhou.aliyuncs.com/goods/share_1596073200000.png" alt="share"></image>
	</button>
</view>
1
2
3
4
5

知识点：
1）分享功能只能通过button按钮 open-type="share"的方式来处理
2）使用animatecss动画实现分享按钮的显示与隐藏
3）判断页面滚动停止后，延时0.5秒如果页面没有滚动，则认为页面停止滚动

在这里插入图片描述

分享按钮样式

button：type=“text” 可以将按钮背景色改为白色 plain 可以将button改为透明色带边框的样式
行间样式写为：style=“border:none;background:transparent;” 背景颜色改为transparent透明色，border边框改为None.
加入Image，绑定外部链接图，之前有提到过，image如果直接绑定动态参数会失效的问题，这个可以翻看之前的博客内容。

分享图标的显示与隐藏

onscroll 通过这个变量来处理。如果在页面滚动过程中，οnscrοll=false,对应的animate动画样式为sliderOutRight,如果页面停止滚动，οnscrοll=true,对应的animate动画样式为sliderInRight.

监听页面滚动与停止滚动

先全局定义一个let timer = null;

onPageScroll(e){
	//这段代码是置顶部分的代码
	if(e.scrollTop > this.phoneHeight){
		this.toTopFlag = true;
	}else{
		this.toTopFlag = false;
	}		
	//这段代码是置顶部分的代码
	// 清理定时器
	clearTimeout(timer); // 每次滚动前 清除一次
	//onscroll设置为true，则分享按钮隐藏
	this.onscroll=true;
	timer = setTimeout(()=> { 
		console.log('滚动结束了');
		// 分享按钮显示
		this.onscroll=false;
	}, 500);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

红包动效