<template>
<div class="share">
<div class="header">
<div class="top-content">
<span class="iconfont icon-fanhui1" @click="back"></span>
<span>在线客服</span>
<span class="iconfont"></span>
</div>
</div>
<!-- 23.5rem;height:38.75rem -->
<div class="myScroll">
<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="100">
<li v-for="item in list">{{item}}</li>
</ul>
<div class="loadingStyle" v-show="loading==true">
<loading-pull></loading-pull>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import headx from 'base/head/head-back'
import {mixins} from 'assets/js/mixins'
import { DatetimePicker } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
import i18n from 'assets/js/vi18n/i18n.js'
import searchNew from 'base/search_new/search'
import loadingPull from 'base/loading/loadingPull'
export default {
mixins: [mixins],
i18n,
data() {
return {
timeNow:new Date().getFullYear(),
valueYear:new Date(),
startDate: new Date('2017'),
listData: [],
selectItemData: null,
cancelText:'',
confirmText:'',
list:[],
loading:false
}
},
components: {
headx,
searchNew,
loadingPull
},
props: {
appMenuName: {
type: null
}
},
methods: {
back() {
this.$router.go(-1);
},
loadMore() {
console.log('进来');
// 防止多次加载
if (this.loading) {
return false
}
this.loading = true;
setTimeout(() => {
let last = this.list[this.list.length - 1];
for (let i = 1; i <= 10; i++) {
this.list.push(last + i);
}
this.loading = false;
}, 2000);
}
},
mounted() {
this.list = [1,2,3,4,5,6,7,8,9,10];
},
}
</script>
<style scoped lang="stylus">
@import '~assets/stylus/veriable.styl'
@import "~assets/stylus/mixin.styl"
.share
position absolute
top 0
bottom 0
left 0
right 0
z-index 15
background $color-background
.header
width 100%
background $color-background-head
border-bottom .0625rem solid #dadada
text-align: center
color #000
.top-content
height 3.125rem
padding-top .625rem
width 100%
display flex
justify-content space-between
align-items center
.iconfont
padding 0.625rem
width 3.75rem
color #bfbfbf
font-size .875rem
font-weight normal
.myScroll
max-height: 600px;
overflow-y: auto;
ul
li
line-height 5rem
li:nth-child(even)
background #ccc
.loadingStyle
background white
text-align center
font-size .75rem
line-height 1.875rem
</style>