<transition name="fold">
<div class="shopcart-list" v-show="listShow">
<div class="list-header">
<div class="title">
<span>已选商品</span>
</div>
<span class="empty" @click="empty" >清空</span>
</div>
<div class="list-content" ref="listContent">
<ul>
<li v-for="food in selectFoods" class="food">
<span class="name">{{food.goodname}}</span>
<div class="price">
<span class="totalPrice"><span class="sign">¥</span>{{(food.price * food.count).toFixed(2)}}</span>
</div>
<div class="cartcontrol-wrapper">
<!-- 必须传:food="food",cartcontrol组件才生效 -->
<cartcontrol :food="food"></cartcontrol>
</div>
</li>
</ul>
</div>
</div>
</transition>
//购物车 列表弹出
import cartcontrol from './cartcontrol'
//插入+.-
fold: true // 默认折叠
//折叠判断
listShow() {
if (!this.totalCount) {
this.fold = true;
return false;
}
let show = !this.fold;
// 添加滚动
if (show) {
this.$nextTick(() => {
if (!this.shopcartListScroll) {
this.shopcartListScroll = new BScroll(this.$refs.listContent, {
click: true
});
} else {
// 根据每次toggle计算高度来决定能否滚动
this.shopcartListScroll.refresh();
}
});
}
return show;
},
// 商品列表,如果有东西则显示 并且允许bs点击
<div class="left" @click="toggleList">
// click点击时 购物车点击。。显示隐藏
<span class="empty" @click="empty" >清空</span>
//点击清空
empty() {
this.selectFoods.forEach((food) => {
food.count = 0;
});
},
//清空
//清空效果
背景模糊啥的就不讲了 点击事件而已,点击让fold为true就行了
渲染成功却报undefind 注意当有多个层级时 进入最近的一个比如从this.data = response 改为this.data = response.respond;