有bug的滑动加载
2020-07-23 本文已影响0人
糖醋里脊120625
<template>
<div class="shopmall">
<div class="shopban">
<van-swipe :autoplay="4000" :loop="true" indicator-color="#fff">
<van-swipe-item v-for="(image, index) in bannerlist" :key="index">
<img :src="image">
</van-swipe-item>
</van-swipe>
</div>
<van-tabs v-model="active" swipeable @change="tabChange" sticky swipeable @scroll='handleScroll'>
<div class="allfixed" @click="wholehas"><span :class="{'underline':active==0}">全部</span></div>
<van-tab v-for="(item,index) in tabtarlist" :key="index" :title="item.name">
<van-list :immediate-check='true' v-model="loading" :finished="finished" finished-text="" @load="getMore(item.id)">
<div class="goodsall">
<div class="goodshalf" v-for="(item,index) in tabtarlist[active].itemList" @click="godetail(item)">
<div class="goodsitem">
<img src="https://www.17sucai.com/preview/67633/2017-08-29/%E8%BD%AE%E6%92%AD/img/1.jpg">
<h5>{{item.name}}</h5>
<p>{{item.profile}}</p>
<span style="color:#E3AE46;">{{item.price}}元+200积分</span>
</div>
</div>
</div>
</van-list>
<img style="display: block;margin:20px auto;width: 50%;" src="../assets/none.png" v-if="tabtarlist[active].shownothing" />
<span class="notext" v-if="tabtarlist[active].shownothing">没有内容</span>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import * as weilink from "../utils/weixin.js";
import wx from 'weixin-js-sdk'
import {
savebankinfo
} from '@/api/jssdk'
import operate from '@/minix/operate.js';
export default {
name: 'integshop',
mixins: [operate],
data() {
return {
viewpage:1,
pagesize:10,
loading: false,
finished: false,
active: 0,
card_bank: '',
tabtarlist: [],
bannerlist: [
'https://www.17sucai.com/preview/67633/2017-08-29/%E8%BD%AE%E6%92%AD/img/1.jpg',
'https://www.17sucai.com/preview/67633/2017-08-29/%E8%BD%AE%E6%92%AD/img/3.jpg'
],
viewlist:[]
};
},
methods: {
getkinds(){
let that = this;
let postdata={
'page': 1,
'pagesize': 100,
}
this.axios.post('/Api/CentCategory/list', postdata).then(function(res){
if(res.status ==='1'){
var item = {};
item['id'] =0;
item['name'] = "全部";
res.data.unshift(item);
that.tabtarlist = res.data;
for (const item of that.tabtarlist) {
item.itemList = [];
item.shownothing = false;
item.eachpage = 1;
item.eachtabsize = 10;
}
console.log(that.tabtarlist)
}else{
}
}, function(res){
console.log(res)
})
},
tabChange(val) {
var that= this;
if(that.tabtarlist[that.active].itemList.length>0){
that.loading= false;
that.finished= true;
}else{
that.loading= false;
that.finished= false;
}
let valid = this.tabtarlist[val];
console.log(this.active)
console.log(valid)
},
godetail(val){
console.log(val)
sessionStorage.setItem('setgoodsid', val.id)
this.$router.push({
name: 'integdetail',
params: {
putgoodsid: val.id,
}
})
},
onLoad() {
},
getMore(val){
setTimeout(() => {
let that = this;
let postdata={
'page': that.tabtarlist[that.active].eachpage,
'pagesize': that.tabtarlist[that.active].eachtabsize,
'category_id':that.active
}
const viewtoast = this.$toast.loading({
duration:0,
message: '加载中...',
forbidClick: true,
});
this.axios.post('/Api/CentGoods/list', postdata).then(function(res){
if(res.status ==='1'){
viewtoast.clear();
if(res.data.length>0){
that.tabtarlist[that.active].itemList = that.tabtarlist[that.active].itemList.concat(res.data);
that.loading = false;
that.tabtarlist[that.active].eachpage += 1;//页数+1
}else{
that.finished = true;
}
}else{
that.finished = true;
viewtoast.clear();
}
if(that.tabtarlist[that.active].itemList.length>0){
that.tabtarlist[that.active].shownothing = false;
}else{
that.tabtarlist[that.active].shownothing = true;
}
}, function(res){
viewtoast.clear();
console.log(res)
})
}, 500);
},
wholehas(){
this.active=0;
},
handleScroll({scrollTop}){
console.log('高度'+scrollTop)
},
},
created() {
this.getkinds();
// 微信分享配置
wx.ready(function() {
wx.hideOptionMenu();
wx.hideMenuItems({
menuList: []
});
})
}
};
</script>
<style>
.shopmall .van-list{
background:white!important;
}
.shopmall .van-tab__pane{
background:white!important;
}
.shopmall .van-tabs__line{
background: #ECBD50!important;
}
.van-sticky--fixed .allfixed{
position: fixed!important;
}
</style>
<style scoped="scoped">
.notext{
display: block;
text-align: center;
font-size: 12px;
color: #969799;
text-align: center;
}
.shopban img {
display: block;
width: 100%;
height: 200px;
}
.goodsall {
width: 97%;
margin: auto;
clear: both;
overflow: hidden;
padding-bottom: 20px;
}
.goodshalf {
width: 50%;
box-sizing: border-box;
float: left;
margin: 14px auto auto auto;
height: 210px;
}
.goodsitem {
width: 96%;
margin: auto;
height: 210px;
}
.goodshalf img {
display: block;
width: 100%;
margin: auto;
border-radius: 6px;
}
.goodshalf h5 {
color: #282828;
font-size: 14px;
padding: 0px 0px;
margin: 6px 0px!important;
text-align: justify;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.goodshalf p {
margin: 1px 0px;
font-size: 14px;
line-height: 1.5;
color: #656565;
text-align: justify;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.goodshalf span {
display: block;
font-size: 14px;
padding: 6px 0px;
}
.allfixed{
background: white;
position: absolute;
z-index: 999;
color: #646566;
font-size: 14px;
line-height: 44px;
text-align: center;
cursor: pointer;
flex-basis: 22%;
top: 0px;
width: 70px;
text-align: center;
height: 44px;
padding: 0px 8px;
}
.allfixed span{
display: block;
box-sizing: border-box;
height: 44px;
width: 42px;
margin: auto;
}
.underline{
border-bottom: 3px solid #ECBD50;
}
</style>
