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

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

首页特效视频

电商小程序首页动效

1. 回到顶部（置顶）特效
2. 分享特效
3. 红包特效

回到顶部特效

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

知识点：

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

获取手机屏幕高度

uniapp getSystemInfo方法使用文档：
getSystemInfo

uni.getSystemInfo({
    success: res => {
		this.phoneHeight = res.windowHeight;
	}
});

监听页面上拉滚动

我是在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. 使用animate动画，隐藏与显示 分享图标时，有动效。
2. 监听页面滚动，如果延时函数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） 分享功能只能通过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);
}

红包动效

红包样式代码

<template>
	<view>
		<!-- 左侧红包 -->
		<view class="r_bag">
			<image class="bag1 animated tada infinite" v-if="!rbagmodelshow && !openrbagmodelshow" :animation="bag1animation" src="/static/icon/bag1.png" mode="" @click="openrbagbtn()"></image>
		</view>
		<!-- 红包封面 -->
		<view class="rbag_model" v-if="rbagmodelshow" @touchmove.prevent.stop>
			<view class="close animated rubberBand">
				<image class="redBag" src="http://58d.oss-cn-hangzhou.aliyuncs.com/goods/redBagClose_1596018067000.png" mode="widthFix"></image>
				<view class="redBag-word">
					<view class="subTit">活动专享</view>
					<view class="tips">送您一个购物津贴</view>
				</view>
				<button class='getMoney' type='primary' :animation="openbrnanimation" open-type="getUserInfo" hover-class="btnDown" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
					立即领取
				</button>
				<view class="hide_btn" @click.stop="hidebtn">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
		</view>

		<!-- 打开红包 -->
		<view class="open_rbag_model" v-if="openrbagmodelshow" @touchmove.prevent.stop>
			<view class="close animated rubberBand">
				<image class="redBag" src="http://58d.oss-cn-hangzhou.aliyuncs.com/goods/redBagOpen_1596018109000.png" mode="widthFix"></image>
				<view v-if="!isTake">
					<view class="youhuiTip">
						<view class="youhuiTips" v-if="openredBag">
							<countup :num="num" color="#ffcc1a" width='24' height='40' fontSize='40' :fontWeight="500"></countup>￥</view>
							<view class="youhuiTit">购物津贴</view>
					</view>
					<view class="redBag-word">
						<view class="subTit">恭喜您获得</view>
					</view>
					<button class='getYouhui' type='primary' lang="zh_CN" @click="checkMoney" hover-class="btnDown">
						查看购物津贴
					</button>
				</view>
				<view v-else class="youhuiTip">
					<view class="subTit">您已领取过购物津贴</view>
					<button class='getYouhui old' type='primary' lang="zh_CN" @click="checkMoney" hover-class="btnDown">
						查看购物津贴
					</button>
				</view>
				<view class="hide_btn" @click.stop="hidebtnALL">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
		</view>
	</view>
</template>

//  红包动画
imageanimation: function() {
	var that = this;
	var next = true;
	var animation = uni.createAnimation({
		duration: 1000,
		timingFunction: 'ease',
	})
	that.bag1animation = animation;
	animation.rotateY(360).step();
	setInterval(function() {
		if (next) {
			animation.rotate(360).step();
			next = !next;
		} else {
			animation.rotate(-360).step();
			next = !next;
		}
		that.bag1animation = animation.export()
	}, 1100)
}