Простое использование Better-Scroll - потяните вверх, чтобы загрузить больше - вернуться к началу

Vue.js

что лучше-прокрутить

Better-scroll — это подключаемый модуль, ориентированный на удовлетворение потребностей различных сценариев прокрутки на мобильном терминале (ПК уже поддерживается). Его ядром является реализация iscroll для справки.Его дизайн API в основном совместим с iscroll, а некоторые функции и оптимизации производительности были расширены на основе iscroll.

принцип качения

<div class="wrapper">
      <div class="content">
      </div>
</div>

Оболочка, родительский контейнер, имеет фиксированную высоту. content, который является первым дочерним элементом родительского контейнера, и его высота будет расти вместе с размером содержимого. Затем, когда высота содержимого не превышает высоту родительского контейнера, его нельзя прокручивать, а когда оно превышает высоту родительского контейнера, мы можем прокручивать область содержимого, котораяbetter-scrollпринцип прокатки.

сцены, которые будут использоваться

Реализовано с помощью Better-Scroll点击回到底部а также上拉加载更多и мобильная прокрутка卡顿

Использование лучшей прокрутки в Vue

1. Сначала лучше инкапсулировать прокрутку в отдельный компонент. Поскольку в проекте на мобильной стороне есть много мест, которые необходимо

  • 1. Пройтиnpm install better-scroll --saveПриходите установить
  • 2. Создайте новыйbetter-scroll.vueкомпоненты, в<template>Напишите следующий код в
<template>
  <div class="wrapper" ref="wrapper">
      <div class="content">
          <slot></slot>
      </div>
  </div>
</template>

Под оберткой должно быть только одно содержимое ярлыка, и используются компоненты, которые необходимо прокручивать позже.slotвставить вcontentпод

  • 3. В<script>сначала импортироватьbetter-scroll 
<script>
// 导入better-scroll
  import BScroll from 'better-scroll'
  export default {
    name:'BetterScroll',
    },
</script>
  • 4. ВmountedСоздайте объект Scroll в функции ловушки. Нужно использовать$refsчтобы получить объект DOM оболочки, вcreatedиспользуется в$refsне доступен
 mounted(){
          // 1.滚动效果 创建scroll对象
          this.scroll =  new BScroll(this.$refs.wrapper,{})
        },
  • 5. Настройте вновь созданный объект прокрутки в компоненте better-scroll.

Поскольку мы хотим инкапсулировать этот компонент, нам нужно передать значение, соответствующее probeType, из того места, где используется компонент, поэтому реквизиты необходимы для реализации

код, связанный с данными

   props:{
   <!--接收父组件传递的参数-->
        probeType:{
            type:Number,
            default:0
        },
        pullUpLoad:{
            type:Boolean,
            default:false
        },

    },

Код, связанный с прокруткой объекта

     this.scroll =  new BScroll(this.$refs.wrapper,{
          // 1、 probeType：监听滚动的位置；可选值：1、2、3;
          probeType:this.probeType,
          
          // 2、click:默认值：false
          better-scroll 默认会阻止浏览器的原生 click 事件。
          当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
          
          click: true,
          
          //3、pullUpLoad：默认值：false
          如果需要监听滚动底部事件，设置为true
          pullUpLoad:this.pullUpLoad
          })

Используйте методы, которые поставляются с объектом прокрутки

 mounted(){
          // 1.滚动效果 创建scroll对象
          this.scroll =  new BScroll(this.$refs.wrapper,{
          probeType:this.probeType,
          click: true,
          pullUpLoad:this.pullUpLoad
          })
          //2. 实时监听滚动，来实现返回顶部按钮的功能
          this.scroll.on('scroll',(position)=>{
            // 将监听的数据坐标发射出去，父组件用来接收处理
            this.$emit('scroll',position)
          })
          // 3.实现加载更多 监听上拉事件
          this.scroll.on('pullingUp',()=>{
          //当滚动到底部的时候调用。
            console.log("底部到了")
            this.$emit('pullingUp')
          })
        }
  • 6. Инкапсуляция завершена, собственный метод нового скролла нужен позже, мы его прямо добавляем в better-scroll

2. Используйте упакованный компонент Better-Scroll в компоненте HOME.

  • 1. Импортируйте упакованные компоненты
import BetterScroll from '@/components/common/BetterScroll/BetterScroll'
  • 2. Зарегистрируйтесь
  components: {
      BetterScroll
  }
  • 3. Поместите компоненты, которые нуждаются в оптимизации прокрутки, в лучшую прокрутку

Перечислено на главной странице У меня есть список упакованных продуктов, которые мне нужно добавитьGoodListкомпоненты вbetter-scrollсередина

 <Better-scroll class="content"
    :probeType="3"//监听滚动的方式
    :pullUpLoad="true"//是否使用滚动到底部的监听方法
     ref="scroll"
     @scroll="scroll"//接受封装的组件中发射出来的实时滚动坐标
     @pullingUp="loadmore"////接受封装的组件中发射出来的pullingUp方法。用于监听滚到底部、
     >
     // 需要滚动的组件（可放入多个）
    <Goods-list ></Goods-list>
     </Better-scroll>

Поскольку, используя лучшую прокрутку, нам нужно установить прокручиваемую область, поэтому нам нужно добавить контент в инкапсулированный компонент.

Настройте css, необходимый для использования лучшей прокрутки в домашнем компоненте.

  • 1. Сначала установите CSS для домашнего компонента div
<template>
	<div id="home">
	 <Better-scroll class="content">
	 <goodlist></goodlist>
	 </Better-scroll>
	</div>

#home{
    height:100vh;
    position: relative;
  }
  • 2. Установите css для компонента Better-Scroll, см. следующий рисунок и код, установите прокручиваемую область
 .content{
   overflow: hidden;
   position:absolute;
   top:44px;
   bottom:49px;
   left:0;
   right:0;
 }

Это устанавливает точный размер прокручиваемой области. В настоящее время не будет задержки при прокрутке на мобильном терминале.

3. Реализуйте эффект кнопки «назад вверх».

1. Сначала управляйте отображением и скрытием кнопки, нам нужно прокрутить до определенного расстояния, прежде чем показывать кнопку «Назад к верхней».

Создайте компонент backtop, компонент backtop не нужно прокручивать, поэтому его не нужно размещать в компоненте better-scroll.

  • 1. Создайте компонент для кнопки возврата наверх
<template>
  <div class="back-top" @click="backtopclick">
    <img src="~assets/img/common/top.png">
  </div>
</template>

<script>
  export default {
    name:'BackTop',
    methods:{
      backtopclick(){
      }
    }
  }
</script>

<style scoped>
  .back-top{
    position: fixed;
    right: 10px;
    bottom: 60px;
  }
  .back-top img{
    width: 43px;
  }
</style>

Используйте компонент Backtop в домашних условиях (введение и регистрация не будут вставлять код)

<Back-top @click.native="backclick" v-show="backtop"></Back-top>

data(){
    return {
    //默认隐藏
        backtop:false,
    }
}

Статус отображения кнопки должен быть установлен на true после прокрутки до определенной позиции и использовать метод прокрутки, переданный в better-scroll (оба this.scroll.on поставляются с прокруткой для отслеживания событий в реальном времени).

    scroll(position){
      // 1.返回顶部的实现
      //position.y是scroll中实时监听的y坐标；（为负值）
      //当y滚动到1000的时候，就将this.backtop为true
      this.backtop = -position.y>1000
    },

Выше приведена реализация показа кнопки Backtop для отображения скрытого

2. Нажмите кнопку, чтобы вернуться к верхней реализации

Сначала вам нужно прослушать событие щелчка компонента кнопкиbackclick（）

<Back-top @click.native="backclick" v-show="backtop"></Back-top>

Определите его в методахbackclick（）

  backclick(){
      // this.$refs.scroll选中scroll组件来使用里面的scrollTo方法
      (x坐标，y坐标，时间)
      this.$refs.scroll.scroll.scrollTo(0,0,500)
    },

На данный момент реализовано требование нажатия кнопки для возврата наверх.

4. Затем потяните вверх, чтобы загрузить больше

1. Сначала следите за прокруткой вниз.

В приведенном выше коде событие было определено в компоненте прокрутки (в приведенном выше коде компонента код был добавлен)

 // 3.实现加载更多 监听上拉事件
          this.scroll.on('pullingUp',()=>{
            this.$emit('pullingUp')
          })

В домашнем компоненте обратитесь к компоненту Better-Scroll и добавьте его@pullingUp="loadmore"

  <Better-scroll class="content" @pullingUp="loadmore" >
  </ Better-scroll>

2. Определите загрузку

Слушайте прокрутку до нижнего события в better-scroll, которое можно вызвать только один раз. Когда вы прокрутите вниз в первый раз, он будет называтьсяloadmoreКогда ты снова скатишься ко дну, ты не будешь слушать дно. Итак, в LoadMore нам нужно принести его с помощью Scroll.finishPullUp()метод, чтобы он не вызывался только один разpullingUp

   loadmore(){
   //1.当滚到底部后，请求下一页的商品数据
   （getHomeGoods是我项目里面跳用商品数据的方法）
      this.getHomeGoods(this.cutype)
      this.$refs.scroll.scroll.finishPullUp()
      this.$refs.scroll.refresh()
    },

После того, как мы прокрутим вниз, мы позвонимloadmore, Запросить данные о товаре еще раз, область, которую нужно прокрутить, становится выше в это время, но better-scroll не пересчитывает высоту, поэтому в loadmore после выполнения запроса будет вызван метод обновления объекта прокрутки выполнить пересчет высоты

Здесь подтягивание для загрузки дополнительных функций завершено.

Категории