Ready to make the world a better place!

preface

1 introduction

Common properties props

top-load-method

// Pull up refresh function :top-load-method="refresh"Copy the code

bottom-load-method

// dropdown loading function :bottom-load-method="loadMore"Copy the code

top-config

TopConfig: {pullText: 'drop to refresh ', // Drop to display text triggerText: 'Release update ', // drop down to trigger distance display text loadingText:' loading... ', // loading text doneText: 'loading complete ', // loading complete text failText:' loading failed ', // loading failed text loadedStayTime: TriggerDistance: 70 // drop refresh triggerDistance}Copy the code

bottom-config

Bottom-config ="bottomConfig" bottomConfig: {pullText: 'load up ', triggerText:' release update ', loadingText: 'load up... ', doneText: 'load completed ', failText:' load failed ', loadedStayTime: 400, stayDistance: 50, triggerDistance: 70}Copy the code

Common slot slot

default

<ul> <li></li> </ul>Copy the code

top-block

// The default structure is p tag with default-text. // The content is props. StateText <template slot="bottom-block". slot-scope="props"> <p class="default-text"> {{ props.stateText }} </p> </template>Copy the code

bottom-block

Slot 2.6+ // Pull trigger loading loaded-done // <template #bottom-block="{stateText, state}"> <p class="default-text"> {{noMore? 'no more' : stateText}} - {{state}} < / p > < / template >Copy the code

Common events

scroll

@scroll="scroll"Copy the code

infinite-scroll

@infinite Scroll ="infiniteScroll" when scrolling to the bottom of the containerCopy the code

bottom-pull

@bottom-pull="bottomPull"Copy the code

bottom-state-change

// state pull trigger loading loaded-done @bottom-state-change="bottomStateChange"Copy the code

2 use

The installation

npm install vue-pull-to  --save
Copy the code

Pull up refresh, pull down load

<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 ? 'No more' : 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: 'pull-up load ', triggerText:' Release update ', loadingText: 'Loading... ', doneText: 'load completed ', failText:' load failed ', loadedStayTime: 400, stayDistance: 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>Copy the code

3. Pay attention to

1. The scroll is native scroll, bScroll is custom scroll 2. The container must limit the height, and set overflow hiding 3. For internal horizontal scrolling, set overflow-x: scroll

The end of the

You can live your life without me

See you later

Refer to the link

  • Vue – pull – to document

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas