每天学习一个vue插件(14)——vue-pull-to

准备好把世界变得更美好了吗！

前言

1 介绍

常用属性 props

top-load-method

// 上拉刷新函数
:top-load-method="refresh"

bottom-load-method

// 下拉加载函数
:bottom-load-method="loadMore"

top-config

// 顶部配置信息
:top-config="topConfig"

topConfig：{
  pullText: '下拉刷新', // 下拉时显示的文字
  triggerText: '释放更新', // 下拉到触发距离时显示的文字
  loadingText: '加载中...', // 加载中的文字
  doneText: '加载完成', // 加载完成的文字
  failText: '加载失败', // 加载失败的文字
  loadedStayTime: 400, // 加载完后停留的时间ms
  stayDistance: 50, // 触发刷新后停留的距离
  triggerDistance: 70 // 下拉刷新触发的距离
}

bottom-config

// 底部配置信息
:bottom-config="bottomConfig"

bottomConfig：{
  pullText: '上拉加载',
  triggerText: '释放更新',
  loadingText: '加载中...',
  doneText: '加载完成',
  failText: '加载失败',
  loadedStayTime: 400,
  stayDistance: 50,
  triggerDistance: 70
}

常用插槽 slot

default

// 默认插槽
// 需要滚动的列表内容
<ul>
  <li></li>
</ul>

top-block

// 滚动容器外顶部的内容 slot 2.5
// 默认结构 带 default-text 的 p 标签
// 内容为 props.stateText
<template slot="bottom-block" slot-scope="props">
  <p class="default-text">
    {{ props.stateText }}
  </p>
</template>

bottom-block

// 滚动容器外底部的内容 slot 2.6+
// 四种状态 pull trigger loading loaded-done
// 四种文本 上拉加载 释放更新 加载中... 加载完成
<template #bottom-block="{stateText, state}">
  <p class="default-text">
    {{ noMore ? '没有更多了' : stateText }} - {{ state }}
  </p>
</template>

常用事件 event

scroll

// 滚动时触发
@scroll="scroll"

infinite-scroll

// 滚动到容器底部时触发
@infinite-scroll="infiniteScroll"

bottom-pull

// 上拉时触发
// 参数 distance 与底部距离
@bottom-pull="bottomPull"

bottom-state-change

// 底部状态发生变化时触发
// 参数 state pull trigger loading loaded-done
@bottom-state-change="bottomStateChange"

2 使用

安装

npm install vue-pull-to  --save

上拉刷新，下拉加载

<template>
  <div class="BasePullTo">
    <pull-to
      :bottomConfig="bottomConfig"
      :top-load-method="refresh"
      :bottom-load-method="loadMore"
      @bottom-pull="bottomPull"
      @bottom-state-change="bottomStateChange"
    >
      <ul class="list">
        <li class="item" v-for="item in dataList" :key="item">
          <template v-if="item % 4 === 0">
            <ul class="flex flex-justify">
              <li v-for="n in item" :key="n">{{ item }}_{{ n }}</li>
            </ul>
          </template>
          <template v-else>
            {{ item }}
          </template>
        </li>
      </ul>
      <template #bottom-block="{stateText, state}">
        <p class="default-text">
          {{ noMore ? '没有更多了' : stateText }} - {{ state }}
        </p>
      </template>
    </pull-to>
  </div>
</template>

<script>
import PullTo from 'vue-pull-to'

export default {
  name: 'example',
  components: {
    PullTo
  },
  data() {
    return {
      bottomConfig: {
        pullText: '上拉加载',
        triggerText: '释放更新',
        loadingText: '加载中...',
        doneText: '加载完成',
        failText: '加载失败',
        // 加载成功停留时间
        loadedStayTime: 400,
        // 加载成功停留距离
        stayDistance: 50,
        // 触发加载更多上拉距离
        triggerDistance: 70
      },
      dataList: [],
      page: 1,
      maxPage: 3,
      noMore: false
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    fetchDataList(max) {
      return new Promise(resolve => {
        const list = Array(max)
          .fill(1)
          .map((v, i) => i + 1)

        setTimeout(() => {
          resolve({ list })
        }, 1000)
      })
    },
    refresh(loaded) {
      this.fetchDataList(10).then(data => {
        this.dataList = data.list
        loaded && loaded('done')
      })
    },
    loadMore(loaded) {
      if (this.page > this.maxPage) {
        loaded('done')
        this.noMore = true
        return
      }
      this.page++
      this.fetchDataList(this.page * 10).then(data => {
        this.dataList = data.list
        loaded('done')
      })
    },
    bottomPull(pos) {
      console.log('bottomPull', pos)
    },
    bottomStateChange(state) {
      // pull trigger loading loaded-done
      console.log('bottomStateChange', state)
    }
  }
}
</script>

<style lang="scss" scoped>
.BasePullTo {
  height: 400px;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  .item {
    height: 40px;
    line-height: 40px;
    background: rgba(0, 0, 0, 0.03);
    & + li {
      margin-top: 20px;
    }
    ul {
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    li {
      // width: 100px;
      // flex-basis: 100px;
      flex: 0 0 100px;
      margin: 0 20px;
      background: burlywood;
    }
  }
}
</style>

3.注意

1.该滚动为原生滚动，bscroll为自定义滚动
2.容器须限制高度，且设置溢出隐藏
3.内部横向滚动，需设置overflow-x: scroll

尾声

就算没有我，你也能自己好好地生活吧~

有机会再见咯 ^_^

参考链接

• vue-pull-to 文档

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize
• 每天学习一个vue插件(12)——vue-fullpage
• 每天学习一个vue插件(13)——html2canvas