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
有多余的代码 不管 看主要代码就好
infinite-loading 插件的更多相关文章
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
- loading插件(原创)
前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chenggu ...
- 【自己开发】Jquery的loading插件
经过几周的时间的开发.我的loading插件终于上线了.这个插件功能为客户提供正在等待的信息,提供优良用户体验效果. 先看效果. 原理我内部实现我不讲,特别简单. 我说调用方式和api. 首先引用jq ...
- #Plugin 环形loading插件
CircleLoader 环形loading插件 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 案例展示 下载地址 https://github.com/cha ...
- JQuery+Bootstrap 自定义全屏Loading插件
/** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param ...
- 自定义vue的loading插件
在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件. 一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中, ...
- 基于weui loading插件封装
<!-- Loading.vue --> <template> <div id="loadingToast" v-if="show" ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- 插件-监控页面加载之loading
查看效果点https://icedjuice.github.io/plug-in/loading/loading.html 简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是 ...
- Infinite Scroll–无限分页
一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...
随机推荐
- EF提示“序列化类型为XXX的对象时检测到循环引用”
能看到这个标题 ,我就用解释原因,网上很多,我只给大家一个解决方案会: public <#=code.Escape(entity)#> ToPOCO() { return new < ...
- nginx配置备份
server { listen 80; server_name localhost; set $expires_duration "30d"; if ($uri ~* \.html ...
- 深入理解C#的装箱和拆箱(转)
装箱和拆箱是值类型和引用类型之间相互转换是要执行的操作. 1. 装箱在值类型向引用类型转换时发生 2. 拆箱在引用类型向值类型转换时发生 光上述两句话不难理解,但是往深处了解,就需要一些篇幅来解释了 ...
- DNS搭建
构建主从服务DNS 1.主服务名字:ns1.amber.com #hostname ns1.amber.com bash 刷新一下 #bash 2.Vim /etc/hosts 3.Vim /etc/ ...
- php验证地图坐标在某片坐标区域内
mysql空间查询并不太适合地图坐标,如果使用:http://www.cnblogs.com/tyjsjl/p/8760002.html的方式进行地图点坐标的查询就不好用了,于是直接使用php来进行地 ...
- C#使用NPOI读写Excel的注意事项
NPOI的基本使用参照:https://www.cnblogs.com/lixiaobin/p/NPOI.html 既存文档读取修改方法 *既存Excel文档修改保存注意使用FileMode.Crea ...
- 用PLSQL DEVELOPER工具简单查找ORACLE中的死锁和死锁排除
用DBA身份登录后 查找死锁: select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ...
- E3Upload项目总结
项目需求:读取阿里云数据库数据,通过webservice接口上传给第三方. 概要设计,项目满足以下几点: 1.动态接口调用 2.给多平台上传 3.数据保持(减轻数据库压力) 4.上传任务管理 5.扩展 ...
- 游戏中的沉浸(Flow in Games)
转自:https://www.jianshu.com/p/4c52067f6594 作者:陈星汉(JenovaChen) 本论文的主旨在于提供一种独特的方法论,用以指导游戏设计中的以玩家为中心的动态难 ...
- autocomplete初步使用
之前使用过autocomplete自动补全,只是简单的传入input框中要补全的数组,类似于 $('#id').autocomplete('[数组形式的补全数据]',{minChars: 0}); 只 ...