<bscroll class="bd" ref="bscroll" :pullup="true" @scrollToEnd="getMore">
<ul>
<router-link :to="'/detail/'+item.id" tag="li" v-for="(item, index) in list" :key="index">
<h3>{{item.title}}</h3>
<div class="content">
<div class="image">
<img :src="'img/list/'+item.img">
</div>
<div class="text">
<div class="top">{{item.text}}</div>
<div class="bottom">
<span>{{item.num}}瀏覽</span>
<div v-if="item.imgname" class="person">
<span>{{item.imgname}}</span>
<img :src="'img/list/'+item.icon" alt="">
</div>
<div v-else? class="type" :style="item.type=='問答'?'color:#42d6ba;border-color:#42d6ba':'color:#f63c3c;border-color:#f63c3c'">{{item.type}}</div>
</div>
</div>
</div>
</router-link>
<div class="loading" v-if="allList.length">
<img src="img/loading.gif" alt="">
<!-- 正在加載 -->
</div>
</ul>
</bscroll>
：pullup就是支持上拉刷新描沟，scrollToEnd表示上拉刷新執(zhí)行時(shí)要執(zhí)行的方法
這個(gè)封裝好的scroll
scroll.vue
<template>
? <div ref="scroll">
? ? <slot></slot>
? </div>
</template>
<script>
? import BScroll from 'better-scroll'
? export default {
? ? props: {
? ? ? probeType: {
? ? ? ? type: Number,
? ? ? ? default: 1
? ? ? },
? ? ? click: {
? ? ? ? type: Boolean,
? ? ? ? default: true
? ? ? },
? ? ? pullup: {
? ? ? ? type: Boolean,
? ? ? ? default: false
? ? ? },
? ? ? pullDown: {
? ? ? ? type: Boolean,
? ? ? ? default: false
? ? ? },
? ? ? data: {
? ? ? ? type: Array,
? ? ? ? default: null
? ? ? },
? ? ? listenScroll: {
? ? ? ? type: Boolean,
? ? ? ? default: false
? ? ? },
? ? },
? ? data() {
? ? ? return {}
? ? },
? ? mounted() {
? ? ? setTimeout(() => {
? ? ? ? this.initScroll();
? ? ? }, 20)
? ? },
? ? methods: {
? ? ? initScroll() {
? ? ? ? this.scroll = new BScroll(this.$refs.scroll, {
? ? ? ? ? probeType: this.probeType,
? ? ? ? ? click: this.click
? ? ? ? })
? ? ? ? //如果監(jiān)聽滾動(dòng)并派發(fā)事件 scroll
? ? ? ? if (this.listenScroll) {
? ? ? ? ? let that = this
? ? ? ? ? this.scroll.on('scroll', (pos) => {
? ? ? ? ? ? that.$emit('scroll', pos)
? ? ? ? ? })
? ? ? ? }
? ? ? ? //上拉加載
? ? ? ? if (this.pullup) {
? ? ? ? ? this.scroll.on('scrollEnd', (e) => {
? ? ? ? ? ? console.log(e)
? ? ? ? ? ? // console.log(this.scroll.y)
? ? ? ? ? ? // console.log(this.scroll.maxScrollY)
? ? ? ? ? ? if (this.scroll.y <= (this.scroll.maxScrollY + 100)) {
? ? ? ? ? ? ? this.$emit('scrollToEnd')
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? }
? ? ? ? //下拉刷新
? ? ? ? if (this.pullDown) {
? ? ? ? ? this.scroll.on('scrollEnd', (e) => {
? ? ? ? ? ? console.log(e)
? ? ? ? ? ? // console.log(this.scroll.y)
? ? ? ? ? ? // console.log(this.scroll.maxScrollY)
? ? ? ? ? ? if (this.scroll.y >= (this.scroll.maxScrollY + 100)) {
? ? ? ? ? ? ? this.$emit('scrollToEnd')
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? }
? ? ? },
? ? ? //重新渲染
? ? ? refresh() {
? ? ? ? this.scroll && this.scroll.refresh()
? ? ? },
? ? ? //滾動(dòng)
? ? ? scrollToElement() {
? ? ? ? this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
? ? ? }
? ? },
? ? watch: {
? ? ? data() {
? ? ? ? setTimeout(() => {
? ? ? ? ? this.refresh()
? ? ? ? }, 20)
? ? ? }
? ? }
? }
</script>
<style scoped>
</style>
