ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车

ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车 演示扫描二维码

收藏一个商品之后 -> 个人中心 -> 我的收藏 查看演示效果。

QQ：4292423

上先效果图。

JS（这里的JS我是直接用别人的，CSDN有下，自己处理了下样式）

let animationShowHeight = 300;

Page({
data: {
showModalStatus: false,
imageHeight: 0,
imageWidth: 0
},

showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(animationShowHeight).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 0)
},
hideModal: function () {
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation;
animation.translateY(animationShowHeight).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
},
onShow: function () {
let that = this;
wx.getSystemInfo({
success: function (res) {
animationShowHeight = res.windowHeight;
}
})
},
})

CSS

.add {
background: #f60;
color: #fff;
float: right;
padding: 14rpx 35rpx;
margin-right: 20rpx;
}

.can {
background: #eee;
float: right;
padding: 14rpx 35rpx;
margin-right: 0rpx;
}

.container-column {
display: flex;
flex-direction: column;
width: 100%;
background-color: white;
}

.buydes-container {
display: flex;
height: 100%;
justify-content: space-between;
}

.buydes-dialog-container {
width: 100%;
height: 100%;
justify-content: space-between;
background-color: rgba(15, 15, 26, 0.7);
position: fixed;
z-index: 999;
}

.buydes-dialog-container-top {
flex-grow: 1;
}

.buydes-dialog-container-bottom {
display: flex;
flex-grow: 0;
}

.buydes-dialog-container-bottom-item {
padding: 24rpx;
display: flex;
justify-content: center;
border-bottom: 1rpx solid #eee;
}

.close {
width: 22px;
height: 22px;
background: #555;
border: 1px solid #555;
border-radius: 50% 50%;
line-height: 22px;
text-align: center;
color: #fff;
font-family: 'Lucida Sans',
'Lucida Sans Regular',
'Lucida Grande',
'Lucida Sans Unicode',
Geneva,
Verdana,
sans-serif;
font-size: 16px;
position: absolute;
right: 10rpx;
margin-top: 10rpx;
}

.addimg {
float: left;
}

.addimg image {
width: 220rpx;
height: 220rpx;
padding: 10rpx 10rpx 10rpx 0;
}

.goodsaddinfo {
border-bottom: 1px solid #eee;
width: 100%;
}

.addname {
width: 420rpx;
float: left;
font-size: 32rpx;
margin: 30rpx 0 0 0;
}

.addnamet {
height: 70rpx;
overflow: hidden;
}

.addprice {
font-size: 42rpx;
color: #f60;
padding: 15rpx 0;
}

.stepper {
border: 1px solid #ccc;
border-radius: 3px;
width: 80px;
height: 28px;
float: left;
margin-bottom: 10px;
display: block;
margin-left: 6px;
}

/*加号与减号*/

.stepper text {
width: 19px;
line-height: 26px;
text-align: center;
float: left;
}

/*数值*/

.stepper input {
color: black;
float: left;
margin: 0 auto;
width: 40px;
height: 28px;
text-align: center;
font-size: 12px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

/*普通样式*/

.stepper .normal {
color: black;
}

/*禁用样式*/

.stepper .disabled {
color: #ccc;
}

/*复选框样式*/

.carts-list icon {
margin-top: 60rpx;
margin-right: 20rpx;
}

.attr li {
width: 100%;
float: right;
border-bottom: 1px solid #f2f2f2;
line-height: 28px;
padding: 10px 0 0 0;
}

.attr li view {
width: 620rpx;
float: right;
}

.attr label {
font-size: 12px;
float: left;
width: 90rpx;
margin-left: 4%;
}

.attr span {
font-size: 14px;
border-radius: 3px;
text-align: center;
color: #ff4200;
padding: 0px 15px;
margin-right: 10px;
border: 1px solid #eee;
float: left;
display: block;
margin-bottom: 10px;
box-sizing: border-box;
}

.attr .hover {
background: #ff4200;
border: 1px solid #ff4200;
color: #fff;
}

.num label {
font-size: 12px;
float: left;
width: 90rpx;
margin-left: 4%;
}

.num {
width: 96%;
float: right;
border-bottom: 1px solid #f2f2f2;
line-height: 28px;
padding: 10px 0 0 0;
display: block;
overflow: auto;
}

.up, .down {
font-family: "iconfont";
font-size: 12px;
color: #556665;
position: absolute;
display: inline-block;
right: 4%;
}

.up:before {
content: "\e616";
}

.down:before {
content: "\e615";
}

.addcart {
width: 100%;
background: #ff4200;
text-align: center;
color: #fff;
float: right;
height: 50px;
line-height: 50px;
font-size: 16px;
}

页面文件:

<view class="add" bindtap="showModal">加入购物车</view>

<view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}">
<view class="buydes-dialog-container-top" bindtap="hideModal"></view>

<view class="container-column buydes-dialog-container-bottom">
<view class="close" bindtap="hideModal">x</view>
<view class="goodsaddinfo">
<view class="addimg">
<image src="https://xcx.yoyimm.com/images/201704/goods_img/317_G_1492632942900.jpg"></image>
</view>
<view class="addname">
<view class="addnamet">商品名称比较一下商品名称比较一下商品名称比较一下商品名称比较一下商品名称比较一下</view>
<view class="addprice">￥199元</view>
</view>
</view>

<view class="attr">
<ul>
<li>
<label>尺码</label>
<view>
<span class="hover">S</span>
<span>M</span>
<span>L</span>
<span>XL</span>
</view>
</li>

<li>
<label>颜色</label>
<view>
<span class="hover">红色</span>
<span>绿</span>
<span>紫色</span>
<span>紫色</span>
<span>紫色</span>
</view>
</li>
</ul>
</view>
<view class="num">
<label>数量</label>
<view class="stepper">

<!-- 减号 -->
<text class="{{goods_number == 1 ? 'disabled' : 'normal'}}" bindtap="bindMinus">-</text>

<!-- 数值 -->
<input type="number" bindchange="bindManual" value="1" />

<!-- 加号 -->
<text class="normal" bindtap="bindPlus">+</text>
</view>
</view>
<view class="addcart" bindtap="addToCart">加入购物车</view>

</view>
</view>

4000