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

首页特效视频

电商小程序首页动效

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

回到顶部特效

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

知识点：

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

获取手机屏幕高度

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

分享特效

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

使用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）分享功能只能通过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)
}

红包样式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;}}
}

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

社交购物小程序开发社交电商小程序源码定制社交购物系统搭建
社交购物平台APP开发-定制,社交购物平台,社交购物系统开发,社交购物APP开发,社交购物系统平台源码定制,社交购物平台源码开发,社交购物平台制作,社交购物网站开发拼多多.有赞的上市将社交电商推向了 ...
智慧物业小程序_刷脸支付+电商小程序+智慧酒店营销方案
我们这边刷脸支付+电商小程序+智慧酒店行业解决方案,支付宝微信订房小程序,芝麻信用免押住,数字化经营发券引流,未来酒店:0押金 0房费退房扣款,不占用资金,用户增长信用分,线上订房小程序,无接触服务 ...
小程序如何跳转到各大电商小程序进行CPS赚钱
小程序系统广告门槛高,流量主费用低,个人开发者难以变现.电商CPS也是一种不错的变现方式,在自己的小程序内添加购物优惠导航入口.自己小程序的用户通过导航跳转到电商平台,进行购物,购物完成结算后,作为开 ...
电商小程序 -- 商品多规格选择弹框
最近在搞一个电商小程序,一个月左右入门到放弃直接上效果图商品规格选择功能 1, choose.js文件 2, choose.json 文件(*没用的) 3, choose.wxml 布局文件 4, ...
拼团商城小程序高保真原型模板、支付、优惠券、客服、物流、收藏、足迹、优惠券、订单管理、评价、设置、地址、售后、拼团、消息通知、商城小程序、电商小程序、拼团电商、移动端电商、高保真电商、电商app
主要功能:首页:(轮播图.活动快速入口.商品推荐).搜索分类: 商品分类(三级显示).商品详情.拼团or单独购买.订单结算.拼团状态消息:(客服.通知.物流.活动)我的:收藏.足迹.优惠券.订单 ...
Axure电商服务小程序交互原型模板、电商小程序、拼团特惠、积分兑换、LBS电商小程序、活动、订单、会员、购物车、签到、钱包充值、拼团拼单、优惠券、电商原型、rp源文件、Axure原型、移动端电商系统
Axure电商服务小程序交互原型模板.电商小程序.拼团特惠.积分兑换.LBS电商小程序.活动.订单.会员.购物车.签到.钱包充值.拼团拼单.优惠券.电商原型.rp源文件.Axure原型.移动端电商系统 ...
电商小程序实战教程-分类导航
电商小程序实战教程第一章总体介绍第二章创建数据源第三章创建管理后台第四章首页的创建前言从上一篇开始,我们就正式进入到了电商小程序的实战开发阶段.首先是介绍了首页的开发,首页主要是展 ...
云开发电商小程序实战教程-篇首语
目录写作的目的过往的技术学习路线寻求突破学习的困难真实的场景几个场景的思考云开发学习的方法写作的目的从08年进入计算机行业后,先后做过开发.实施.运维.售前.项目管理岗位,也先后换 ...
来客推电商|小程序+h5+app商城|含分销拼团砍价等多种引流插件|前后代码开源
来客推电商|小程序+h5+app商城|含分销拼团砍价等多种引流插件|前后代码开源精致电商,来客, [ 微信 + 支付宝 + 百度 + 头条 ] 小程序 + APP + 公众号 + PC + H5,注 ...
电商小程序实战教程-需求分析
日常我们经常在小程序上买东西,到店扫码点餐支付成了一个司空见惯的事情.好一点的店是用的商家自营的小程序,稍差一点的使用的现成的.不管是自营还是使用现成的软件都是为了提高运营的效率,一方面是方便顾客购买 ...

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

电商小程序首页动效

回到顶部特效

获取手机屏幕高度

监听页面上拉滚动

分享特效

分享按钮样式

分享图标的显示与隐藏

监听页面滚动与停止滚动

红包动效

红包样式代码

红包样式css代码

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

最新文章

热门文章

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

电商小程序首页动效

回到顶部特效

获取手机屏幕高度

监听页面上拉滚动

分享特效

分享按钮样式

分享图标的显示与隐藏

监听页面滚动与停止滚动

红包动效

红包样式代码

红包样式css代码

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

最新文章

热门文章

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

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