Some birds aren’t meant to be caged. Their feathers are just too bright

preface

Began, so began, a little excited, also a little uneasy

Refueling, progress a little bit every day, a little bit good 😄

1 introduction

Common Configuration Items

Const options = {// Allow scrolling events probeType: 1, // Allow simultaneous horizontal scrolling eventPassthrough: 'horizontal', // Allow native click events click: True, // Allow touch tap tap: 'tap'}Copy the code

Commonly used attributes

maxScrollY

Pos. y < maxScrollY bs. MaxScrollYCopy the code

Commonly used method

refresh

// recalculate the scroll area // pull data, change the DOM need to call bs.refresh()Copy the code

scrollTo

// Return to top with bs.scrollto (x, y)Copy the code

scrollToElement

// scrollToElement(el) with bs.scrollToElement(el)Copy the code

Common event

scrollStart

/ / scroll at the beginning of the trigger / / for data reset bs. On (' scrollStart, () = > {})Copy the code

scroll

Y === = maxScrollY bs.on('scroll', pos => console.log(pos. X, pos. Y))Copy the code

touchEnd

/ / finger left trigger / / for the drop-down refresh and tensile load on the bs. On (' touchEnd '() = > {})Copy the code

Special event

pullingUp

// The plugin must be imported and registered. Import BetterScroll from '@better-scroll/core' import Pullup from '@better-scroll/pull-up' BetterScroll. Use (Pullup)  const bs = new BetterScroll('.wrapper', { pullUpLoad: true }) bs.on('pullingUp', async () => { await fetchData() bs.finishPullUp() })Copy the code

pullingDown

// The plugin must be imported and registered. Import BetterScroll from '@better-scroll/core' import Pulldown from '@better-scroll/pull-down' import BetterScroll from '@better-scroll/pull-down' BetterScroll.use(Pulldown) const bs = new BetterScroll('.wrapper', { pullDownRefresh: true }) bs.on('pullingDown', async () => { await fetchData() bs.finishPullDown() })Copy the code

2 use

The installation

All the installation

npm install better-scroll --save
Copy the code

According to the need to install

npm install @better-scroll/core --save
npm install @better-scroll/pull-up --save
Copy the code

rolling

According to the need to import

<template> <div class="BScroll" ref="BScroll"> <div class="content"> <div class="pull-down" v-show="! IsLoading "> {{pullDownMsg}} </div> <p v-show="isLoading"> Loading... </p> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> <div class="pull-up" v-show="! IsLoading "> {{pullUpMsg}} </div> <p v-show="isLoading"> Loading... </p> </div> </div> </template> <script> import BScroll from '@better-scroll/core' import Pulldown from '@better-scroll/pull-down' import Pullup from '@better-scroll/pull-up' BScroll.use(Pulldown).use(Pullup) export default {name: 'BScroll', data () {return {bs: null, options: {probeType: 1, // Allow native click events PullDownRefresh: {threshold: 50, stop: 0}, pullUpLoad: {threshold: 50}}, pullDownMsg: PullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg, list: array. from({length: 10}, (v, I) => I), total: 20, isLoading: false } }, mounted () { this.init() }, methods: { fetchData () { return new Promise(resolve => { const list = Array.from({ length: 10 }, (v, i) => i + 1) setTimeout(() => resolve(list), 1000) }) }, init () { this.bs = new BScroll(this.$refs.BScroll, this.options) this.bs.on('pullingDown', async (pos) => { this.isLoading = true console.log('pullingDown', pos) const list = await this.fetchData() this.isLoading = false this.list = list this.bs.finishPullDown() }) this.bs.on('pullingUp', Async (pos) => {if (this.list.length >= this.total) {this.pullupmsg = 'I have a baseline' return} this.isloading = true console.log('pullingUp', pos) const list = await this.fetchData() this.isLoading = false this.list.push(... list) this.bs.finishPullUp() this.$nextTick(() => this.bs.refresh()) }) } } } </script> <style lang="scss" scoped> .BScroll { height: 500px; overflow: hidden; .pull-down { line-height: 40px; transform: translateY(-100%); } .pull-up { line-height: 40px; transform: translateY(100%); } li { line-height: 60px; } } </style>Copy the code

All import

<template> <div class="BScroll" ref="BScroll"> <div class="content"> <div class="pull-down" v-show="! IsLoading "> {{pullDownMsg}} </div> <p v-show="isLoading"> Loading... </p> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> <div class="pull-up" v-show="! IsLoading "> {{pullUpMsg}} </div> <p v-show="isLoading"> Loading... </p> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { name: 'BScroll', data () {return {bs: null, options: {// Allow to send scroll events probeType: 1, // Allow native click events click: true}, threshold: PullDownMsg: pullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg: pullUpMsg, list: array. from({length: 10}, (v, I) => I), total: 20, isLoading: false } }, mounted () { this.init() }, methods: { fetchData () { return new Promise(resolve => { const list = Array.from({ length: 10 }, (v, i) => i + 1) setTimeout(() => resolve(list), 1000) }) }, init () { this.bs = new BScroll(this.$refs.BScroll, this.options) this.bs.on('scroll', Pos => {if (pos. Y > this.threshold) {this.pullDownMsg = 'drop to refresh'} else if (pos. Y > 0) {this.pullDownMsg = 'drop to refresh'} Else if (pos.y < this.bs.maxscrolly - this.threshold) {this.pullupmsg = 'free load more'} else if (pos.y < this.bs.maxscrolly) {this.pullUpMsg = 'pull up'} console.log('scroll', pos.y, this.pullDownMsg)}) this.bs.on('touchEnd', Async (pos) => {if (this.list.length >= this.total) {this.pullupmsg = 'I have a baseline' return} if (pos. Y > this.threshold) { this.isLoading = true console.log('pullingDown', pos) const list = await this.fetchData() this.isLoading = false this.list = list this.$nextTick(() => this.bs.refresh())  } else if (pos.y < this.bs.maxScrollY - this.threshold) { this.isLoading = true console.log('pullingUp', pos) const list = await this.fetchData() this.isLoading = false this.list.push(... list) this.$nextTick(() => this.bs.refresh()) } }) } } } </script> <style lang="scss" scoped> .BScroll { height: 500px; overflow: hidden; .pull-down { line-height: 40px; transform: translateY(-100%); } .pull-up { line-height: 40px; transform: translateY(100%); } li { line-height: 60px; } } </style>Copy the code

3. Pay attention to

1. The scrolling area should have a fixed height 2. The scrolling area should overflow: hidden 3. Local introduction of the bottom will not rebound

The end of the

Once upon a time there was a duckling who could only say good night all day. The other ducklings felt very strange, so they asked their owner why this duckling could only say good night. His owner said, because his name is goodnight Duck

Good night duck, good night

Refer to the link

  • Better Scroll warehouse
  • Better Scroll document
  • Better Scroll case