better-scroll

배경 과 우세
1. D8 황 일 선생님 이 iscroll 을 기반 으로 재 작성 한 플러그 인 으로 모 바 일 엔 드 (PC 지원) 의 각종 스크롤 장면 수 요 를 중점적으로 해결 하 는 플러그 인 입 니 다.Vue 와 잘 어 울 려 사용 할 수 있 습 니 다.2. 스크롤 이 원활 하고 스크롤 바 가 없습니다.
문서 주소
홈 페이지http://ustbhuangyi.github.io/better-scroll/doc/
설치 하 다.

npm install better-scroll --save

끌어들이다

import BScroll from 'better-scroll'

간단 한 예

  
  

    
...
    
...
    ...
  
  

초기 화

let scroll = new BScroll('.wrapper', {
    scrollY: true,
    click: true
})

스크롤 가능 한 전제: 1. content 는 wrapper 보다 높 고 2. wrapper 너비 가 높 으 며 overflow: hidden
그것 은 우리 가 업무 중 업무 의 각종 사용 장면 을 실현 하 는 데 많은 방법 과 속성 을 가지 고 있다.
자기가 만 든 위로 끌 어 올 리 기, 아래로 끌 어 올 리 기, 새로 고침 데모
p1dgf-p9k5z.gif

import BScroll from 'better-scroll'
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      startNum: 1,
      list: [],
      pullDownMsg: "    ，    ",
      pullUpMsg: "   ，   ...",
      noMsg: "     ",
      bsScroll: ""
    };
  },

  components: {},

  computed: {},

  mounted: function() {
      this.getList().then((res) => {
        this.list = this.list.concat(res);
      });
      //    
      this.bsScroll = new BScroll(this.$refs.wrap, {
          probeType: 1, 
          click: true
      })
      //       
      this.bsScroll.on('scroll', (pos) => {
        if(pos.y > 0 && pos.y <= 40) {
          this.pullDownMsg = '    ，    ';
        }else if(pos.y > 40) {
          this.pullDownMsg = "    ，    "
        }
      })
      //       
      this.bsScroll.on('touchEnd', (pos) => {
        if(pos.y > 40) {
          //       
          this.startNum = this.getRandom(1, 100);
          setTimeout(() => {
            this.getList().then((res) => {
              this.list = res;
              this.pullDownMsg = '    ，    ';
            }) 
          }, 1000)
        }else if(pos.y < this.bsScroll.maxScrollY - 30) {
          //     
          this.getList().then((res) => {
            this.list = this.list.concat(res);
            this.bsScroll.refresh();
          })
        }
      })
  },

  methods: {
    getList() {
      //       
      return new Promise(resolve => {
        setTimeout(() => {
            let start = this.startNum, arr = [];
            for (
                this.startNum;
                this.startNum <= start + 18;
                this.startNum++
            ) {
                arr.push(this.startNum);
                resolve(arr);
            }
        }, 1000);
      });
    },
    getRandom(m, n) {
      return Math.floor(Math.random()*(m - n) + n);
    }
  }
};

춤 을 추 지 못 한 모든 날 은 생명 에 대한 저 버 림 이다.