Skip to content

严立 / mini-shimao

Go to a project
Commit 667f630d by wjw
Options

ww-购物车添加动画

parent b63396c8
Inline Side-by-side
Showing with 204 additions and 164 deletions
pages/commodity/snacks/snacks.js
......@@ -5,6 +5,7 @@ Page({
rightTitle: '优惠套餐',
showPopup: false,
showAddSucc: false,
hideAnimation: true,
leftMenuList: [
{
id: 0,
......@@ -103,6 +104,12 @@ Page({
goods_now_text: '业主价'
}
},
onLoad() {
this.animationDown = wx.createAnimation({
duration: 400,
timingFunction: 'ease'
})
},
handleItemTap(e) {
let index = e.currentTarget.dataset.index
let rightTitle = this.data.leftMenuList[index].tab
......@@ -125,12 +132,28 @@ Page({
})
},
handleAddCart() {
let showPopup = false
let showAddSucc = true
this.setData({
showPopup,
showAddSucc
})
let showPopup = false
let showAddSucc = true
let hideAnimation = false
this.animationDown.translateY(180).step()
this.setData({
showPopup,
showAddSucc,
hideAnimation,
})
setTimeout(() => {
this.setData({
animationDown: this.animationDown.export()
})
})
setTimeout(() => {
this.animationDown.translateY(0).step()
let hideAnimation = true
this.setData({
hideAnimation,
animationDown: this.animationDown.export()
})
}, 400)
},
goToCart() {
wx.navigateTo({
......
pages/commodity/snacks/snacks.wxml
......@@ -46,39 +46,41 @@
</view>
</view>
<!-- 购物车按钮 -->
<view class="cart-btn row con-c align-c" bindtap="goToCart">
<view class="cart-num row con-c align-c">{{cart.length}}</view>
<view class="cart-img-wrap">
<image src="../../../image/cart.png" mode="widthFix"></image>
<view class="cart-btn row con-c align-c" bindtap="goToCart">
<view class="cart-num row con-c align-c">{{cart.length}}</view>
<view class="cart-img-wrap">
<image src="../../../image/cart.png" mode="widthFix"></image>
</view>
</view>
</view>
</scroll-view>
<!-- 购物车弹窗 -->
<l-popup show="{{showPopup}}" content-align="center" locked="{{true}}">
<view class="popup-wrap">
<view class="popup-img-wrapper">
<image mode="widthFix" src="./image/popup.png"></image>
<image mode="widthFix" src="./image/popup.png"></image>
</view>
<view class="popup-info-wrapper">
<view class="popuo-info-title">咖喱蔬菜大虾</view>
<view class="popup-info-text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view>
<view class="popuo-info-title">咖喱蔬菜大虾</view>
<view class="popup-info-text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view>
</view>
<view class="popup-footer-wrapper">
<view class="popup-price-row row align-c">
<view class="popup-price-now">￥<text style="font-size: 38rpx">78.00</text></view>
<view class="popup-price-discount row con-c align-c {{popupObj.goods_now_text === '业主价' ? 'vipPrice' : ''}}">{{popupObj.goods-now-text}}</view>
<view class="popup-price-old">¥68.00</view>
</view>
<view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view>
<view class="popup-price-row row align-c">
<view class="popup-price-now">￥<text style="font-size: 38rpx">78.00</text></view>
<view class="popup-price-discount row con-c align-c {{popupObj.goods_now_text === '业主价' ? 'vipPrice' : ''}}">{{popupObj.goods-now-text}}</view>
<view class="popup-price-old">¥68.00</view>
</view>
<view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view>
</view>
</view>
<view class="popup-close-btn row con-c align-c" bindtap="handleClosePopup">
<view class="popup-close">
<image mode="widthFix" src="../../../image/icon_close.png"></image>
<image mode="widthFix" src="../../../image/icon_close.png"></image>
</view>
</view>
</l-popup>
<!-- 添加成功 -->
<l-toast show="{{showAddSucc}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" />
<!-- 加入购物车动画 -->
<view class="redPoint {{hideAnimation ? 'animation-hide' : ''}}" animation="{{animationDown}}"></view>
</scroll-view>
</view>
</view>
\ No newline at end of file
pages/commodity/snacks/snacks.wxss
Page {
height: 100%;
height: 100%;
}
.cates {
height: 100%;
height: 100%;
}
.cates-container {
height: 100vh;
display: flex;
height: 100vh;
display: flex;
}
.left-menu {
width: 160rpx;
background: #F2F3F5;
width: 160rpx;
background: #F2F3F5;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
width: 0;
height: 0;
color: transparent;
}
.menu-item {
height: 136rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #656E7B;
height: 136rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #656E7B;
}
.menu-item.active {
color: #5CB5DD;
font-weight: 600;
background: #fff;
border-left: 8rpx solid #86C5E1;
color: #5CB5DD;
font-weight: 600;
background: #fff;
border-left: 8rpx solid #86C5E1;
}
.right-content {
position: relative;
flex: 1;
padding: 0 32rpx 0 28rpx;
position: relative;
flex: 1;
padding: 0 32rpx 0 28rpx;
}
.right-content-title {
height: 100rpx;
padding: 32rpx 0;
font-size: 26rpx;
color: #959DA9;
height: 100rpx;
padding: 32rpx 0;
font-size: 26rpx;
color: #959DA9;
}
.cart-btn {
position: fixed;
right: 48rpx;
bottom: 160rpx;
width: 104rpx;
height: 104rpx;
border-radius: 50%;
background-color: #86C5E1;
position: fixed;
right: 48rpx;
bottom: 160rpx;
width: 104rpx;
height: 104rpx;
border-radius: 50%;
background-color: #86C5E1;
}
.cart-num {
position: absolute;
top: 0;
right: 0;
height: 32rpx;
padding: 0 12rpx;
font-size: 22rpx;
line-height: 32rpx;
border: 1px solid #86C5E1;
border-radius: 17rpx;
color: #86C5E1;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
height: 32rpx;
padding: 0 12rpx;
font-size: 22rpx;
line-height: 32rpx;
border: 1px solid #86C5E1;
border-radius: 17rpx;
color: #86C5E1;
background-color: #fff;
}
.cart-img-wrap {
width: 48rpx;
height: 48rpx;
width: 48rpx;
height: 48rpx;
}
.redPoint {
position: fixed;
right: 80rpx;
bottom: 560rpx;
width: 15px;
height: 15px;
background-color: #E66060;
border-radius: 50%;
}
.animation-hide {
display: none;
}
.item {
width: 100%;
height: 250rpx;
box-sizing: border-box;
width: 100%;
height: 250rpx;
box-sizing: border-box;
}
.item-img {
width: 160rpx;
height: 160rpx;
width: 160rpx;
height: 160rpx;
}
.item-info {
flex: 1;
margin-left: 28rpx;
flex: 1;
margin-left: 28rpx;
}
.item-info-title {
font-size: 30rpx;
color: #15191F;
font-weight: 600;
font-size: 30rpx;
color: #15191F;
font-weight: 600;
}
.item-info-text-wrap {
width: 100%;
padding: 16rpx 0 24rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #959DA9;
width: 100%;
padding: 16rpx 0 24rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #959DA9;
}
.item-info-content {
height: 40rpx;
height: 40rpx;
}
.item-info-now-price {
font-size: 30rpx;
font-weight: 600;
color: #15191F;
font-size: 30rpx;
font-weight: 600;
color: #15191F;
}
.price-symbol {
font-size: 22rpx;
font-size: 22rpx;
}
.item-now-price-text {
width: 78rpx;
height: 32rpx;
margin-left: 4px;
font-size: 20rpx;
font-weight: 500;
color: #EF4E4E;
line-height: 32rpx;
text-align: center;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
width: 78rpx;
height: 32rpx;
margin-left: 4px;
font-size: 20rpx;
font-weight: 500;
color: #EF4E4E;
line-height: 32rpx;
text-align: center;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
}
.vipPrice {
color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
}
.goods-add-btn-wrap {
flex: 1;
flex: 1;
}
.l-btn-circle {
border-radius: 50% !important;
font-size: 24rpx;
border-radius: 50% !important;
font-size: 24rpx;
}
.item-info-old-price {
margin-top: 4rpx;
font-size: 22rpx;
color: #C2C7CF;
text-decoration:line-through
margin-top: 4rpx;
font-size: 22rpx;
color: #C2C7CF;
text-decoration:line-through
}
.popup-wrap {
position: relative;
width: 606rpx;
background-color: #fff;
border-radius: 4rpx;
position: relative;
width: 606rpx;
background-color: #fff;
border-radius: 4rpx;
}
.popup-img-wrap {
width: 606rpx;
height: 382rpx;
width: 606rpx;
height: 382rpx;
}
.popup-info-wrapper {
padding: 48rpx 40rpx;
padding: 48rpx 40rpx;
}
.popuo-info-title {
font-size: 34rpx;
color: #15191F;
font-size: 34rpx;
color: #15191F;
}
.popup-info-text {
margin-top: 24rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #959DA9;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-top: 24rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #959DA9;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.popup-footer-wrapper {
margin: 0 40rpx;
padding: 40rpx 0;
border-top: 1px solid #E2E7EF;
margin: 0 40rpx;
padding: 40rpx 0;
border-top: 1px solid #E2E7EF;
}
.popup-price-row {
padding: 10rpx 0;
padding: 10rpx 0;
}
.popup-price-now {
color: #15191F;
color: #15191F;
}
.popup-price-discount {
width: 90rpx;
height: 36rpx;
margin-left: 10px;
font-size: 22rpx;
color: #EF4E4E;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
width: 90rpx;
height: 36rpx;
margin-left: 10px;
font-size: 22rpx;
color: #EF4E4E;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
}
.vipPrice {
color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
}
.popup-price-old {
margin-left: 20rpx;
font-size: 26rpx;
color: #959DA9;
text-decoration:line-through
margin-left: 20rpx;
font-size: 26rpx;
color: #959DA9;
text-decoration:line-through
}
.popup-footer-btn {
width: 526rpx;
height: 80rpx;
margin-top: 30rpx;
font-size: 30rpx;
color: #fff;
background-color: #86C5E1;
border-radius: 4rpx;
width: 526rpx;
height: 80rpx;
margin-top: 30rpx;
font-size: 30rpx;
color: #fff;
background-color: #86C5E1;
border-radius: 4rpx;
}
.popup-close-btn {
width: 80rpx;
height: 80rpx;
margin: 48rpx auto 0;
background: rgba(254, 252, 249, 0.5);
border-radius: 50%;
width: 80rpx;
height: 80rpx;
margin: 48rpx auto 0;
background: rgba(254, 252, 249, 0.5);
border-radius: 50%;
}
.popup-close {
width: 40rpx;
height: 40rpx;
width: 40rpx;
height: 40rpx;
}
.toast-bg {
min-width: 262rpx !important;
min-height: 262prx !important;
min-width: 262rpx !important;
min-height: 262prx !important;
}
.toast-image {
}
image {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment