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

落日映苍穹つ 2021-07-25 21:24 1094阅读 0赞

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

[首页特效视频][Link 1]

## 电商小程序首页动效 ##

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

# 回到顶部特效 #

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

知识点：

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

## 获取手机屏幕高度 ##

uniapp getSystemInfo方法使用文档：  
[getSystemInfo][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

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动画中文官网][animate]

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

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

![在这里插入图片描述][20200730172217734.png]

## 分享按钮样式 ##

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);
    }

## 红包动效 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

### 红包样式代码 ###

<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)
    }

### 红包样式css代码 ###

.rbag_model .close,.open_rbag_model .close{ 
    		position: fixed;
    		top:50%;
    		left:0%;
    		width:750upx;
    		transform: translate(-50%,-50%);
    		image{ 
    			width:100%;
    		}
    		.redBag{ 
    			width:600upx;
    			z-index:9;
    			position: absolute;
    			top:50%;
    			left:50%;
    			transform: translate(-50%,-50%);
    		}
    		.openImg{ 
    			z-index:99;
    			position: absolute;
    			top: 180upx;
    			left: 0;
    			right: 0;
    			width: 140upx;
    			height: 140upx;
    			margin: 0 auto;
    		}
    		.redBag-word{ 
    			z-index:99;
    			position: absolute;
    			// top: 340upx;
    			top: -180upx;
    			left: 0;
    			right: 0;
    			width: 100%;
    			line-height: 70upx;
    			text-align: center;
    			margin: 0 auto;
    			color:#fff;
    			.subTit{ 
    				font-size:70upx;
    				line-height: 100upx;
    				font-weight: bold;
    			}
    		}
    		.getMoney{ 
    			z-index:99;
    			position: absolute;
    			// top: 520upx;
    			left: 0;
    			right: 0;
    			// width: 400upx;
    			// height:80upx;
    			// line-height: 80upx;
    			// border-radius: 40upx;
    			// color:#af8b00;
    			// line-height: 80upx;
    			top:80upx;
    			width: 160upx;
    			height:160upx;
    			line-height: 50upx;
    			vertical-align: middle;
    			font-weight:bold;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			font-size:40upx;
    			border-radius: 50%;
    			box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
    			margin: 0 auto;
    			background:linear-gradient(to bottom, #fff6a5,#ffcd1b);
    			color:#ff2400;
    		}
    		.hide_btn{ 
    			// margin-top:200upx;
    			z-index:99;
    			position: absolute;
    			left: 0;
    			right: 0;
    			top:360upx;
    			text-align: center;
    		}
    		button.btnDown{ 
    			background:#ebcc3d;
    			color:#c19a1e;
    		}
    	}
    	.open_rbag_model .close{ 
    		.openImg{ 
    			top: 300upx;
    		}
    		.redBag-word{ 
    			// top: 420upx;
    			top: -20upx;
    		}
    		.getYouhui{ 
    			z-index:99;
    			position: absolute;
    			// top: 630upx;
    			top: 280upx;
    			left: 0;
    			right: 0;
    			width: 300upx;
    			height:60upx;
    			line-height: 60upx;
    			border-radius: 30upx;
    			text-align: center;
    			margin: 0 auto;
    			font-size:26upx;
    			box-shadow:inset 0 0 0 10upx #fff06e,0 10upx 0 0 #f69614;
    			background:linear-gradient(to bottom, #fff6a5,#ffcd1b);
    			color:#ff2400;
    		}
    		.getYouhui.old{ 
    			top:120upx;
    		}
    		.youhuiTip{ 
    			z-index:99;
    			position: absolute;
    			// top: 130upx;
    			top: 100upx;
    			left: 0;
    			right: 0;
    			width: 100%;
    			text-align: center;
    			margin: 0 auto;
    			color:#fff;
    			.youhuiTit{ 
    				font-size:26upx;
    				line-height: 40upx;
    				color:#fff06e;
    			}
    			.youhuiTips{ 
    				color:#fff06e;
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				text{ 
    					font-size:70upx;
    					line-height: 100upx;
    					font-weight: bold;
    				}
    			}
    		}
    		.hide_btn{ 
    			z-index:99;
    			position: absolute;
    			left: 0;
    			right: 0;
    			top:420upx;
    			text-align: center;
    		}
    	}
    	.zaiui-modal-box { 
    	    position: fixed;
    		width:100vw;
    		height:100vh;
    		opacity: 0;
    		top: inherit;
    		left: inherit;
    		right: inherit;
    		bottom: inherit;
    		z-index: 99999999;
    	    text-align: center;
    	    background: rgba(0, 0, 0, 0.6);
    	    transition: all 0.3s;
    		pointer-events: none;
    		&::before { 
    		    content: "\200B";
    		    display: inline-block;
    		    height: 100%;
    		    vertical-align: middle;
    		}
    		.dialog { 
    			position: relative;
    			display: inline-block;
    			vertical-align: middle;
    			width: 618.18rpx;
    			position: relative;
    			.img { 
    				width: 100%;
    				border-radius: 3%;
    			}
    			.close { 
    			    color: #dadada;
    			    top: 18.18rpx;
    			    position: relative;
    			    font-size: 54.54rpx;	
    			}
    			.bottom{ 
    				background:#FDEB03;
    				color:#D82817;
    				font-weight:bold;
    				width:400upx;
    				border-radius: 100upx;
    				position: absolute;
    				bottom:80upx;
    				height:100upx;
    				line-height: 100upx;
    				left:50%;
    				transform: translateX(-50%);
    			}
    		}
    	}
    	.zaiui-modal-box.show { 
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		opacity: 1;
    		pointer-events: auto;
    	}
    .r_bag { 
    	.bag1 { 
    		position: fixed;
    		left: -46upx;
    		top: 160upx;
    		width: 150upx;
    		height: 100upx;
    		z-index: 999;
    	}
    }
    
    // 红包封面
    .rbag_model { 
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100vh;
    	background-color: rgba(0,0,0,0.3);
    	z-index: 1000;
    	.rbag_con { 
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		width: 80%;
    		height: 840upx;
    		background-color: #da4d44;
    		margin: auto;
    		border-radius: 14upx;
    		box-shadow: 0upx 0upx 10upx rgba(0,0,0,0.2);
    		.rbag_top { 
    			position: absolute;
    			left: -20%;
    			top: 0;
    			width: 140%;
    			height: 540upx;
    			background-color: #e0534a;
    			border-radius: 0 0 50% 50%;
    			box-shadow: 0 0 14upx rgba(0,0,0,0.4);
    			z-index: 1001;
    			.rbag_top_info { 
    				margin-top: 60upx;
    				.rbag_logo { 
    					width: 160upx;
    					height: 160upx;
    					border-radius: 50%;
    					display: block;
    					margin: 0 auto;
    					overflow: hidden;
    				}
    				.app_name { 
    					font-size: 38upx;
    					color: #f6ac96;
    					text-align: center;
    					margin-top: 18upx;
    					letter-spacing: 1upx;
    				}
    				.rbag_tips { 
    					font-size: 50upx;
    					color: #edddd3;
    					text-align: center;
    					margin-top: 34upx;
    					letter-spacing: 1upx;
    				}
    			}
    		}
    		.open_rbag_btn { 
    			position: absolute;
    			top: 450upx;
    			left: 0;
    			right: 0;
    			width: 180upx;
    			height: 180upx;
    			line-height: 180upx;
    			border-radius: 50%;
    			margin: 0 auto;
    			text-align: center;
    			background-color: #ffd287;
    			font-size: 55upx;
    			color: #fef5e8;
    			box-shadow: 2upx 2upx 6upx rgba(0,0,0,0.2);
    			z-index: 1002;
    		}
    		.hide_btn { 
    			position: absolute;
    			bottom: -110upx;
    			left: 0;
    			right: 0;
    			width: 80upx;
    			height: 80upx;
    			line-height: 80upx;
    			text-align: center;
    			margin: 0 auto;
    		}
    	}
    	.hidden { 
    		overflow: hidden;
    	}
    }
    
    // 打开红包
    .open_rbag_model { 
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100vh;
    	background-color: rgba(0,0,0,0.3);
    	z-index: 1000;
    	.rbag_conbg { 
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		width: 80%;
    		height: 840upx;
    		margin: auto;
    		z-index: 1001;
    	}
    	.open_rbag_con { 
    		z-index: 1002;
    		.open_title { 
    			height: 120upx;
    			line-height: 120upx;
    			text-align: center;
    			font-size: 38upx;
    			letter-spacing: 2upx;
    			color: #e46965;
    		}
    		.rbag_detail { 
    			margin-top: 90upx;
    			.open_money { 
    				text-align: center;
    				font-size: 80upx;
    				color: #c95948;
    				font-weight: bold;
    				display: flex;
    				justify-content: center;
    				.danwei { 
    					font-size: 30upx;
    					margin-left: 16upx;
    					margin-top: 24upx;
    				}
    			}
    			.open_tips { 
    				text-align: center;
    				font-size: 30upx;
    				color: #d26762;
    				margin-top: 30upx;
    			}
    		}
    		.lookbag_box { 
    			margin-top: 200upx;
    			display: flex;
    			justify-content: center;
    			.lookbag_btn { 
    				width: 70%;
    				height: 90upx;
    				line-height: 90upx;
    				text-align: center;
    				font-size: 32upx;
    				color: #c95948;
    				letter-spacing: 2upx;
    				background-color: #ffd356;
    				border-radius: 50upx;
    				box-shadow: 0upx 0upx 4upx rgba(0,0,0,0.2);
    			}
    		}
    		.hide_btn { 
    			position: absolute;
    			bottom: -110upx;
    			left: 0;
    			right: 0;
    			width: 80upx;
    			height: 80upx;
    			line-height: 80upx;
    			text-align: center;
    			margin: 0 auto;
    		}
    	}
    }

[Link 1]: http://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E7%94%B5%E5%95%86%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A6%96%E9%A1%B5%E5%8A%A8%E6%95%88_1596095222000.mp4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/68e32167e837476d8ab207b6c9f9145e.png
[getSystemInfo]: https://uniapp.dcloud.io/api/system/info
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/886eef3d50c54d0292bc30125d2a439c.png
[animate]: http://www.animate.net.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/b217d716d67c467b807e6ea549221bac.png
[20200730172217734.png]: /images/20210725/60f3fe9f134147e08ec2fcaaff867bd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/baf82b90ecfe45ec8ffa130c1fd0c6e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/b5201f59d0ce49ed81c9591f08dbae85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/94106e88327f4cd38deadb47f4930d97.png