- 底部动画效果，有一个内容蒙层 和一个白色背景 可以划出来 划回去
2.蒙层动画处理
showPop() {
// 现实蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = true;
setTimeout(() => {
animation.translateY(0).step();
this.animationData = animation.export();
}, 200)
},
hidePop() {
// 隐藏蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = false;
setTimeout(() => {
animation.translateY(0).step();
this.isShow = false;
}, 200)
}
3. 固定蒙层，不让里层的内容可以滑动
完整代码：
<template>
<view class="details">
<!-- 商品图 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<view class="swiper-item">
<image class="swiper-img" :src="item.imgUrl" mode=""></image>
</view>
</swiper-item>
</swiper>
<!-- 价格和名称 -->
<view class="detial-goods">
<view class="goods-pprice">￥399.00</view>
<view class="goods-oprice">￥599.33</view>
<view class="goods-name">正在热刷新，如刷新失败，请点击控制台工具栏上的【重启应用图标】</view>
</view>
<!-- 商品详情 -->
<view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
</view>
<!-- 商品列表 -->
<Card name="看了又看"></Card>
<CommodityList :commodityList='dataList'></CommodityList>
<!-- 底部 -->
<view class="detial-footer">
<view class="iconfont icon-xiaoxi"></view>
<view class="iconfont icon-gouwuche"></view>
<view class="add-shopcard" @tap="showPop">加入购物车</view>
<view class="purchase" @tap="showPop">立即购买</view>
</view>
<!-- 底部弹出层 -->
<view class="pop" v-if="isShow" @touchmove.stop.prevent="">
<!-- 蒙层 -->
<view class="pop-mask" @tap="hidePop">
<!-- 内容块 -->
<view class="pop-box" :animation="animationData">
</view>
</view>
</view>
</view>
</template>
<script>
import Card from '@/components/common/card.vue'
import CommodityList from '@/components/common/commodityList.vue'
export default {
data() {
return {
swiperList: [{
imgUrl: '../../static/img/recommended-3.png'
}, {
imgUrl: '../../static/img/recommended-3.png'
}, {
imgUrl: '../../static/img/recommended-3.png'
}],
isShow: false,
animationData: {},
dataList: [{
id: 1,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '299',
oprice: '699',
discount: '5.5'
},
{
id: 2,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '269',
oprice: '699',
discount: '5.5'
},
{
id: 3,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '289',
oprice: '688',
discount: '5.5'
}
]
}
},
components: {
Card,
CommodityList
},
methods: {
showPop() {
// 现实蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = true;
setTimeout(() => {
animation.translateY(0).step();
this.animationData = animation.export();
}, 200)
},
hidePop() {
// 隐藏蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = false;
setTimeout(() => {
animation.translateY(0).step();
this.isShow = false;
}, 200)
}
},
}
</script>
<style>
.details {
padding-bottom: 90rpx;
}
swiper {
width: 100%;
height: 700rpx;
}
.swiper-img {
width: 100%;
height: 700rpx;
}
.detial-goods {
text-align: center;
font-size: 36rpx;
font-weight: bold;
padding: 10rpx 0;
}
.detial-imgs {
width: 100%;
}
.detial-footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 90rpx;
background-color: #FFFFFF;
justify-content: center;
align-items: center;
}
.detial-footer .iconfont {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
border-radius: 100%;
background-color: #333333;
text-align: center;
color: #FFFFFF;
margin: 0 10rpx;
}
.add-shopcard {
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #000000;
color: #FFFFFF;
border-radius: 40rpx;
}
.purchase {
margin: 0 40rpx;
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #49BDFB;
color: #FFFFFF;
border-radius: 40rpx;
}
.pop {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.pop-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.pop-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 600rpx;
background-color: #007AFF;
}
</style>
