<view class="container">
<scroll-view class="side-nav" style="height:100%;" scroll-y="true">
<view class="type-list">
<view class="type-item" wx:for="{{imgArray}}" wx:for-item="item" bindtap="changepage" id="{{index}}" scroll-top="{{scollTop}}">
<view class="type__img" style="background:url('{{item.url}}');background-size: contain;"></view>
<view class="type__desc">{{item.title}}</view>
</view>
</view>
</scroll-view>
<scroll-view class="main-page" style="height:100%;" scroll-y="true" scroll-into-view="{{scroll_into_view}}">
<view class="food-list" wx:for="{{foodArray}}" wx:for-item="item" id="foodtype{{index}}">
<view class="food__title">{{item.title}}</view>
<view class="food-item" wx:for="{{item.foodsIndex}}" wx:for-item="food" wx:for-index="foodidx" id="food{{index}}">
<image class="food-left" src='{{food.url}}'></image>
<view class="food-right">
<view class="food__name">{{food.name}}</view>
<view class="food__price">{{food.price}}¥</view>
<view class="food__add" data-foodidx="{{index}}{{foodidx}}" data-price="{{food.price}}" data-name="{{food.name}}" catchtap="addShopcart">+</view>
</view>
</view>
</view>
</scroll-view>
<view class="shopcart" bindtap="showCart" hidden="{{cartIsHidden}}">
<view class="shopcart-main">
<view class="shopcart-left">
<image src="../../image/shopcart.png" class="shopcart__icon"></image>
<view class="shopcart__count">{{totalCount}}</view>
</view>
<view class="shopcart-middle">
<view class="shopcart__price">¥
<text>{{totalPrice}}</text>
</view>
</view>
<view class="shopcart-right" catchtap="toCount">
<text>选好了</text>
</view>
</view>
</view>
</view>
<view class="list-mask" hidden="{{cartIndexIsHidden}}" animation="{{animationData}}">
<view hidden="{{cartIndexIsHidden}}" class="shopcart__items" wx:for="{{shoppingList}}" wx:for-item="item">
<view class="shopcart__item" hidden="{{cartIndexIsHidden}}">
<view class="cart__left">
<view class="item__h3">{{item.name}}</view>
<view class="item__price">¥{{item.price}}</view>
</view>
<view class="cart__right">
<view class="food__add food__add--delete" data-foodidx="{{index}}" data-price="{{item.price}}" data-name="{{item.name}}" catchtap="deleteShopcartInCart">-</view>
<text>{{item.num}}</text>
<view class="food__add" data-foodidx="{{index}}" data-price="{{item.price}}" data-name="{{item.name}}" catchtap="addShopcartInCart">+</view>
</view>
</view>
</view>
</view>
|
.container {
position: relative;
display: flex;
flex-direction: row;
height: 667px;
width: 100%;
overflow-y: hidden;
}
.main-page {
height: 100%;
background-color: #fff;
z-index: 1;
}
.side-nav {
height: 100%;
width: 21.333333%;
background-color: #f5f0e9;
z-index: 1;
}
.type-list {
width: 100%;
height: 100%;
}
.type-item {
width: 100%;
height: 92px;
text-align: center;
position: relative;
}
.type-item .type__img {
display: inline-block;
width: 50px;
height: 50px;
}
.type-item .type__desc {
position: absolute;
top: 50px;
width: 100%;
font-size: 12px;
color: gray;
}
.page {
height: 100%;
border-bottom: 1px solid #000;
}
.buttonArea {
height: 30%;
display: flex;
flex-direction: column;
justify-content: space-around;
position: fixed;
top: 0px;
left: 0px;
}
.food-item {
width: 100%;
height: 161px;
position: relative;
}
.food-left,
.food-right {
height: 100%;
width: 50%;
display: inline-block;
}
.food-left {
width: 140px;
height: 140px;
vertical-align: middle;
}
.food-right {
text-align: right;
}
.food__name {
opacity: .8;
font-weight: 500;
font-size: 14px;
margin-top: 5px;
}
.food__price {
font-size: 28px;
color: #e02d3f;
font-weight: 600;
}
.food__add {
float: right;
width: 24px;
height: 24px;
line-height: 22px;
font-size: 16px;
text-align: center;
color: #e02d3f;
border: 1px solid #d6d3d3;
border-radius: 37px;
}
.food__title,.food-item {
border-bottom: 1px solid #d6d3d3;
}
.food__title {
color: gray;
font-size: 12px;
height: 15px;
line-height: 15px;
text-align: center;
padding: 0 5px;
}
.shopcart {
position: fixed;
background-color: #e02d3f;
height: 45px;
width: 100%;
bottom: 0px;
left: 0;
z-index: 9;
}
.shopcart-main {
display: flex;
height: 45px;
}
.shopcart-left {
flex: 2;
position: relative;
}
.shopcart__icon {
padding-top: 8px;
height: 32px;
width: 50px;
}
.shopcart__count {
position: absolute;
top: 5px;
left: 46px;
height: 15px;
width: 15px;
font-size: 12px;
border-radius: 99px;
background-color: #ff7b0f;
color: #fff;
text-align: center;
line-height: 15px;
}
.shopcart-middle {
flex: 5;
background-color: #e02d3f;
border-right: 1px solid #fff;
}
.shopcart__price {
line-height: 45px;
text-align: left;
color: #fff;
}
.shopcart__price text {
font-size: 24px;
}
.shopcart-right {
position: relative;
flex: 3;
line-height: 45px;
}
.shopcart-right text {
text-align: center;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-left: 14px;
}
.shopcart-right:after {
content: '';
position: absolute;
top: 15px;
left: 78px;
height: 12px;
width: 12px;
opacity: .7;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotateZ(45deg)
}
.item {
background-color: rebeccapurple ;
}
.list-mask {
position: fixed;
width: 100%;
height: 55px;
bottom: 0px;
left: 0px;
background-color: #fff;
z-index: 5;
}
.shopcart__items {
width: 100%;
}
.shopcart__items {
width: 375px;
background-color: rgba(0,0,0,.7);
}
.shopcart__item {
height: 65px;
display: flex;
background-color: #fff;
border-bottom: 1px solid #f5f0e9;
}
.cart__left {
margin-left: 4px;
margin-top: 8px;
flex: 1;
}
.cart__right {
margin-top: 14px;
}
.cart__right .food__delete, .cart__right text,.cart__right .food__add {
float: left;
margin-right: 6px;
}
.shopcart__items:after,.cart__right:after {
clear: both;
content: ' ';
display: table;
}
.item__h3 {
font-weight: 500;
font-size: 14px;
}
.item__price {
font-size: 18px;
color: #e02d3f;
}
|
// 初始化动画实例
let animation = wx.createAnimation({
duration: 400,
timingFunction: "linear",
delay: 0
});
Page({
data: {
scollTop: 0,
scroll_into_view: 'foodtype0', // scroll-view的初始位置
imgArray: [], // 导航的图片数组，通过ajax获取
foodArray: [], // 食品的对象数组
shoppingList: [], // 购物车储存的对象数组
totalPrice: 0, // 购物车的总价格
totalCount: 0, // 购物车的总数量
movelength: 0, // 上移或下拉动画的单位距离
cartIsHidden: true, // 购物车是否隐藏
cartIndexIsHidden: true, // 购物车详情菜单是否隐藏
animationData: {} // 动画动作对象
},
// 设置标题名
onReady: function () {
wx.setNavigationBarTitle({
title: '菜单'
})
},
// 加载ajax的最佳时机
onLoad: function (options) {
let that = this
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 0,
mask: true
})
// 发送请求
wx.request({
url: 'http://easy-mock.com/mock/5905d4597a878d73716e2c6b/kfc/kfc',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function (res) {
console.log(res.data)
that.setData({
imgArray: res.data.navArray,
foodArray: res.data.foodArray
})
}
}, function () {
wx.hideToast();
})
},
// 跳页的id
changepage: function (e) {
// 滚动到指定的id
let goPage = e.currentTarget.id
this.setData({
scroll_into_view: "foodtype" + goPage
})
},
// 点击‘+’添加进购物车
addShopcart: function (e) {
let move_length = this.data.movelength;
let shopping_list = this.data.shoppingList;
let total_price = this.data.totalPrice;
let total_count = this.data.totalCount + 1;
total_price = parseInt(total_price) + parseInt(e.target.dataset.price);
let itemNum = 1;
let that = this;
// 是否有同种商品判断
if (this.data.shoppingList.length > 0) {
// 商品名是否相同判断，不重复添加同名商品
let isHave = this.data.shoppingList.findIndex(item => item.name == e.target.dataset.name)
if (isHave != -1) {
that.data.shoppingList[isHave].num++
} else {
// 购物车数组加进新的一样食品
that.data.shoppingList.push({
price: e.target.dataset.price,
name: e.target.dataset.name,
num: itemNum
})
// 动画效果的长度添加
move_length++
}
// 没有商品时直接添加
} else {
this.data.shoppingList.push({
price: e.target.dataset.price,
name: e.target.dataset.name,
num: itemNum
})
move_length++
}
// 动画上拉长度对应的bottom的计算
/**
* mlength是bottom的长度
* animation.bottom(mlength).step() 加入动画队列
*/
let mlength = move_length * 55;
if (move_length > 1) {
mlength = 55 + (move_length - 1) * 65;
}
this.animation = animation
animation.bottom(mlength).step()
this.setData({
animationData: animation.export()
})
this.setData({
shoppingList: shopping_list,
totalPrice: total_price,
totalCount: total_count,
// 购物车当有商品时弹出
cartIsHidden: false,
movelength: move_length
})
},
// 购物车详情抽屉点击时弹出
showCart: function (e) {
let move_length = 0;
move_length = this.data.movelength * 55;
if (this.data.movelength > 1) {
move_length = 55 + (this.data.movelength - 1) * 65;
}
this.animation = animation
animation.bottom(move_length).step()
let cart_indexIsHidden = !this.data.cartIndexIsHidden;
this.setData({
cartIndexIsHidden: cart_indexIsHidden,
animationData: animation.export()
})
},
// 购物车详情抽屉中增加数量
addShopcartInCart: function (e) {
let total_count = this.data.totalCount + 1;
let addTarget = this.data.shoppingList.findIndex(item => item.name === e.target.dataset.name);
this.data.shoppingList[addTarget].num++;
let tempPrice = parseInt(this.data.totalPrice) + parseInt(this.data.shoppingList[addTarget].price)
this.setData({
shoppingList: this.data.shoppingList,
totalPrice: tempPrice,
totalCount: total_count
})
},
// 购物车详情抽屉中减少数量,但没有商品时需要抽屉下降并购物车组件消失
deleteShopcartInCart: function (e) {
let move_length = this.data.movelength;
// 选定被点击的元素
let addTarget = this.data.shoppingList.findIndex(item => item.name === e.target.dataset.name);
let tempPrice = 0;
let total_count = this.data.totalCount - 1;
this.data.shoppingList[addTarget].num--;
if (this.data.shoppingList[addTarget].num < 1) {
// 总价的减少
tempPrice = parseInt(this.data.totalPrice) - parseInt(this.data.shoppingList[addTarget].price)
this.data.shoppingList.splice(addTarget, 1);
move_length--;
// bottom值变化产生动画
let mlength = move_length * 61;
if (move_length < 2) {
mlength = move_length * 50
}
if (move_length < 1) {
mlength = -55
}
console.log(this.data.totalPrice)
this.animation = animation
animation.bottom(mlength).step()
// 总数等于0时购物车组件设置为消失
if (total_count == 0) {
let cart_isHidden = !this.data.cartIsHidden
console.log(cart_isHidden)
// 这里设置一个计时器，让下拉抽屉动画完成后再消失组件，不然体验性太差
setTimeout(() => {
this.setData({
cartIsHidden: cart_isHidden
})
}, 1000)
}
this.setData({
shoppingList: this.data.shoppingList,
movelength: move_length,
animationData: animation.export(),
totalPrice: tempPrice
})
} else {
// 计算出来新的价格
tempPrice = parseInt(this.data.totalPrice) - parseInt(this.data.shoppingList[addTarget].price)
console.log(this.data.totalPrice)
}
this.setData({
shoppingList: this.data.shoppingList,
totalPrice: tempPrice,
totalCount: total_count
})
},
toCount: function (e) {
console.log(this.data.totalCount)
// 菜单对象
let OrderMenu = {
list: this.data.shoppingList,
price: this.data.totalPrice,
count: this.data.totalCount
}
// 本地存储菜单对象
wx.setStorage({
key: "OrderMenu",
data: OrderMenu
});
wx.navigateTo({
url: '../order/order'
})
}
})
|
模板简介：该模板名称为【微信小程序肯德基产品食物分类菜单设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
