外部不要加 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

有多余的代码 不管 看主要代码就好

infinite-loading 插件的更多相关文章

  1. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  2. loading插件(原创)

    前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chenggu ...

  3. 【自己开发】Jquery的loading插件

    经过几周的时间的开发.我的loading插件终于上线了.这个插件功能为客户提供正在等待的信息,提供优良用户体验效果. 先看效果. 原理我内部实现我不讲,特别简单. 我说调用方式和api. 首先引用jq ...

  4. #Plugin 环形loading插件

    CircleLoader 环形loading插件 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 案例展示 下载地址 https://github.com/cha ...

  5. JQuery+Bootstrap 自定义全屏Loading插件

    /** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param ...

  6. 自定义vue的loading插件

    在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件. 一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中, ...

  7. 基于weui loading插件封装

    <!-- Loading.vue --> <template> <div id="loadingToast" v-if="show" ...

  8. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  9. 插件-监控页面加载之loading

    查看效果点https://icedjuice.github.io/plug-in/loading/loading.html 简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是 ...

  10. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

随机推荐

  1. IntellijIDEA常用快捷键总结

    转载自:http://blog.csdn.net/qq_17586821/article/details/52554731 下面的这些常用快捷键需要在实际操作中不断地体会才能真正感受到它们的方便之处. ...

  2. IO练习

    #IO操作 import time; fileObj = open('log.txt','a'); while(True): data = input('请输入要写入的内容 : '); if data ...

  3. 《重构-改善既有代码的设计》学习笔记----Extract Method(提炼函数)

    看见一个过长的函数或者需要一段注释才能让人理解的代码,可以考虑将这段代码放进一个独立函数中. 创造一个新的函数,根据这个函数的意图来对它命名(以它“做什么”来命名,而不是以它“怎么做”命名). 需要重 ...

  4. VirtualBox内Linux系统怎样与Windows共享文件夹

    Windows本机用虚拟机安装Linux系统(前提其他已配置好) 1. 双击无法安装,需要在扩展里添加:管理->全局设定->扩展 ->添加 或者 打开虚拟机进入Ubuntu系统,首先 ...

  5. java.util.concurrent包下集合类的特点与适用场景

    java.util.concurrent包,此包下的集合都不允许添加null元素 序号 接口 类 特性 适用场景 1 Queue.Collection ArrayBlockingQueue 有界.阻塞 ...

  6. 好玩的PIL

    原图(下面的代码全为部分)不喜欢的一个库 缩小的代码 from PIL import Image im=Image.open('tupian.jpg') im.thumbnail(128,128)) ...

  7. su: Authentication failure问题

    问题: su命令不能切换root,提示错误su: Authentication failure 解决: 使用命令 sudo passwd root 下次再su的时候只要输入密码就可以成功登录了.

  8. 一个小白用 PhotoView 引起的学习记录

    缘由(可跳过) 作为一个开发小白,有着各种各样想实现的功能, 最近想实现一个图片查看的功能(有放大,缩小等功能),发现了 PhotoView 这个开源框架, 用了它,腰不疼,腿不酸了 ... 添加依赖 ...

  9. substr函数学习

    今天写了单词接龙这道恶心题,在想有没有函数能直接去返回string类型一个区间的字符串,没想到还真有,那就是sudstr 坑点 感觉这个函数有点逗比-- 别的都是str在前,这个偏要在后-- 也许是我 ...

  10. 服务注册中心,Eureka比Zookeeper好在哪里?

    著名的CAP理论指出,一个分布式系统不可能同时满足C(一致性).A(可用性).和P(分区容错性).由于分区容错性P在分布式系统中必须要保证的,因此我们只能在A和C之间进行权衡. 因此: Zookeep ...