infinite-loading 插件
外部不要加 overflow-y:auto
外部不要加 overflow-y:auto
外部不要加 overflow-y:auto
有多余的代码 不管 看主要代码就好
<template> <div id="cart" class="has-top"> <!-- <v-header title="购物车" :back="hasBack"> <template v-if="noData===0"> <span @click="onToggleEdit(1)" v-if="!isEdit" slot="right" class="txt fs14 color-black">管理</span> <span @click="onToggleEdit(0)" v-else slot="right" class="txt fs14 color-black">完成</span> </template> </v-header> --> <div class="cart-list-section noData"> <div class="topWhite"> <img src="../../assets/images/status/success.png" alt="" srcset=""> <h2>订单处理成功</h2> <p>支付金额： <span>¥ {{payMoney}}</span></p> <div class="btm"> <a class="view" @click="view()">查看订单</a> <a class="back" @click="back()">返回首页</a> </div> <!-- <template> <no-data :imageSrc="noDataImg" :text="noDataText"> <router-link to="/" tag="div" class="no-data-btn">去挑选好货</router-link> </no-data> </template> --> </div> <div class="banner"> <router-link to="/beshopkepper"> <img src="../../assets/images/status/hysuccess.jpg" alt="" srcset=""> </router-link> </div> <!--猜你喜欢--> <div class="guess-like" v-if="guessList.length !== 0"> <div class="guess-like-title">- 猜你喜欢 -</div> <div class="guess-like-section"> <!-- <scroller :on-infinite="getGuessList" ref="mainScroller" id="product-comment" class="has-top"> --> <ul class="guess-like-list"> <li class="guess-like-item" v-for="item in guessList" :key="item.skuId" :skuId="item.skuId" @click="onClickItem(item)"> <img :src="item.thumbUrlForShopNow" class="guess-thumbUrl"> <img v-if='item.allStockFlag===1' src="../../assets/images/sellout.png" alt="" class="sellout"> <div class="item-detail"> <div class="guess-title">{{item.productName}}</div> <div class="guess-desc">{{item.intro}}</div> <div class="guess-price-box member"> <span class="guess-price"> <span class="price-ion">¥</span> {{item.minPrice | currency}}/ </span> <span class="guess-marketPrice"> <span class="price-ion">¥</span> {{item.minMarketPrice | currency}} </span> </div> </div> </li> <infinite-loading @infinite="infiniteHandler"> <div slot="no-more">我也是有底线的</div> </infinite-loading> </ul> </div> </div> </div> <main-tab></main-tab> </div> </template> <style scoped> .cart-list-section{ margin: 0px; } .no-data{ margin: 0px; } .topWhite{ background: #fff; text-align: center; padding-top: 1.2rem; padding-bottom: 1.1rem; } .topWhite img{ width: 2.68rem; } .topWhite h2{ font-size: 0.5rem; padding-top: 0.5rem; } .topWhite p{ font-size: 0.42rem; padding: 0.5rem 0; color: #a9a9a9; } .topWhite p span{ color: #ff4e50; } .topWhite .btm{ width: 6.3rem; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: nowrap; } .topWhite .btm .view{ width: 2.72rem; height: 0.9rem; line-height: 0.9rem; display: block; border: 1px solid #ff4e50; border-radius: 0.45rem; color: #ff4e50; } .topWhite .btm .back{ width: 2.72rem; height: 0.9rem; line-height: 0.9rem; display: block; border: 1px solid #ff4e50; border-radius: 0.45rem; background: #ff4e50; color: #fff; } .banner a{ display: block; } .banner img{ width: 100%; } </style> <script type="text/javascript"> import {XImg} from 'vux' import CartService from '@/services/CartService' import UserService from '@/services/UserService' import util from '../../utils/Common.js' import InfiniteLoading from 'vue-infinite-loading' export default { initWechat: true, components: { 'coupon-dialog': require('@/components/CouponDialog'), XImg, InfiniteLoading, }, data () { return { noDataImg:'../assets/images/cart/cartNull.png', noDataText:"洪荒之力都用上了还是空空如也~", noData:'', list: [], guessList:[], vipType:'', isEdit: false, hasBack: false, user: {}, levelConfig: [], pageOffset:1, pageSize:15, totalPage: 99, zero:0, defaultImg:require('../../assets/images/default-img-1.png'), orderCode: '', payMoney: 0 } }, computed: { //猜你喜欢加载更多 loadDisabled () { window.scrollTop(0); return this.isLoading && this.page === this.totalPage; }, //合计 total () { if (!this.amount) { return 0 } return this.list.map(store => { return store.skuProductList.filter(sku => sku.selected).reduce((a, b) => { if (b.productType == 3) { return a + b.retailPrice * b.quantity; } return a + b.currentVipTypePrice * b.quantity; }, 0); }).reduce((a, b) => a + b, 0); }, //商品总数量 amount () { return this.list.map(store => { return store.skuProductList.filter(sku => sku.selected) .map(item => item.quantity) .reduce((a, b) => a + b, 0) }).reduce((a, b) => a + b, 0); }, //选中商品的id selectedSkuIds () { return this.list.map(store => { return store.skuProductList.filter(sku => sku.selected).map(sku => sku.skuId); }).reduce((a, b) => [...a, ...b], []); }, //折扣 discountTotal () { return this.list.map(store => { return store.skuProductList.filter(sku => sku.selected).reduce((a, b) => { if (b.productType == 3) { return a } return a + (b.retailPrice - b.currentVipTypePrice) * b.quantity }, 0); }).reduce((a, b) => a + b, 0); }, //全选 allState () { return this.list.filter(sku => sku.selected).length === this.list.length; }, //除去下架和售罄的总数量 allQuantity(){ let num=this.list.map(store => { return store.skuProductList.filter(item=>item.stock!==0&&item.status) .map(item => item.quantity) .reduce((a, b) => a + b, 0) }).reduce((a, b) => a + b, 0); return num; } }, methods: { view() { this.$router.push('/order/detail/'+this.orderCode) }, back() { this.$router.push('/'); }, //商品详情 onClickItem (item) { util.goToProduct(this,item.productId); }, onNext () { if (this.amount) { let skuIds = this.selectedSkuIds.join(','); window.location.href = '/pay/cart?skuIds=' + skuIds } else { this.showError('请选择商品'); } }, //获取购物车列表 getList () { CartService.getList(this, list => { this.list=this.initNotSelected (list); this.noData=(this.list.length > 0)?0:1; this.list.map((store) => { store.skuProductList.map((item) => { if(item.stock!==0&&item.status) { item.visibility = false; }else { item.visibility = true; } }); return store; }); }); }, //获取猜你喜欢列表 getGuessList () { //this.pageOffset ++; if(this.isLoading) { return ; } if(this.pageOffset > this.totalPage) { this.$refs.mainScroller.finishInfinite(true); return; } this.isLoading = true; CartService.getGuessList(this,this.pageOffset,this.pageSize, list => { this.isLoading = false; this.pageOffset = list.pageOffset; this.totalPage = list.totalPage; if(this.pageOffset === 1){ this.guessList=list.datas; } // if (this.pageOffset >= 2) { // for(let i=0; i<list.datas.length; i++){ // this.$set(this.guessList, this.guessList.length, list.datas[i]); // } // } // this.$refs.mainScroller.setTotal(list.total); // this.$refs.mainScroller.finishInfinite(this.pageOffset >= this.totalPage); }); }, //初始化商品选中 initNotSelected (list) { return list.map((value) => { value.selected = false; value.skuProductList.forEach((item) => item.selected = false); return value; }); }, //是否选中商品 onSelect(sku, store) { if(sku.visibility===false){ sku.selected = !sku.selected; } store.selected = !store.skuProductList.find(item => !item.selected)//选中店铺 }, //全选 toggleAll () { let selected = !this.allState; return this.list.map((store) => { store.selected = selected; store.skuProductList.map((item) => { if(item.stock!==0&&item.status) { item.selected = selected } }); return store; }); }, //是否选中店铺 // onSelectStore(store) { // store.selected = !store.selected; // store.items.forEach(item => item.selected = store.selected) // }, //管理商品---编辑 onToggleEdit (num) { this.isEdit = !this.isEdit; if(num===1){ this.list.map((store) => { store.selected = false; store.skuProductList.map((item) => { item.visibility = false; item.selected = false; }); return store; }); }else { this.list.map((store) => { store.selected = false; store.skuProductList.map((item) => { item.selected = false; if(item.stock!==0&&item.status) { item.visibility = false; }else { item.visibility = true; } }); return store; }); } }, //删除商品 onDelete () { if (this.amount) { CartService.removeBySkuIds(this, this.selectedSkuIds, () => { this.showError('您已成功将商品移除购物车'); this.getList(); }); }else { this.showError('请选择商品'); } }, // 无限加载 infiniteHandler($state) { let pageSize = 15 this.pageOffset = this.pageOffset + 1 CartService.getGuessList(this,this.pageOffset,this.pageSize, list => { console.log(list) let totalPage = list.totalPage if (this.pageOffset <= totalPage) { if (this.pageOffset > 1) { for(let i=0; i<list.datas.length; i++){ this.guessList.push(list.datas[i]) //this.$set(this.guessList, this.guessList.length, list.datas[i]); } } $state.loaded(); }else{ $state.complete(); } }); }, }, created () { history.pushState(null, null, document.URL); window.addEventListener('popstate', function(e) { if (document.URL.split('/')[document.URL.split('/').length - 1] == 'cart') { history.pushState(null, null, document.URL); } }); /** *@desc 获取用户信息（登录校验）---->获取购物车列表、猜你喜欢 *@author zwn *@date 2018/10/10 */ UserService.getInfo( this, (user) => { this.user = user; this.vipType=user.vipType; $(window).scrollTop(0); this.getList(); this.getGuessList(); console.log(this.allQuantity); } ); /** *@desc 子组件更改商品数量之后更新购物车数据 *@author zwn *@date 2018/10/10 */ this.$root.$on('cart.item.amount.update', (skuId, value) => { this.list.forEach((store) => { store.skuProductList.filter(item =>item.skuId === skuId).map(item => { CartService.updateCart(this, item, value, () => { item.quantity = value; }) }); }) }) }, mounted () { this.orderCode = this.$route.query.orderCode this.payMoney = this.$route.query.payMoney / 100 //设置auto 内部可以滚动，触发上滑加载更多 // document.querySelector('#home').style.overflow = 'auto' }, beforeRouteUpdate(to, from, next) { next(); document.body.scrollTop=0; this.getSkuInfoById(to.params.skuId, true); } } </script>
外部不要加 overflow-y:auto
外部不要加 overflow-y:auto
外部不要加 overflow-y:auto
有多余的代码 不管 看主要代码就好
