яма прокрутки с лучшей прокруткой

JavaScript Vue.js CSS

BetterScrollВ настоящее время он известен как лучший плагин для мобильной прокрутки, поэтому его сила определенно есть. Или... лол. Лично я все еще нахожу это полезным. Эта статья не является общейBetterScroll, но просто прокрутите, чтобы узнать больше об этом, пожалуйстапереехатьилиздесь.

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

结构图

Зеленая часть — это обертка, родительский контейнер, который имеет фиксированную высоту. Желтая часть — это содержимое, которое является первым дочерним элементом родительского контейнера, и его высота будет увеличиваться с увеличением размера содержимого. Затем, когда высота содержимого не превышает высоту родительского контейнера, его нельзя прокручивать, а когда оно превышает высоту родительского контейнера, мы можем прокручивать область содержимого. Принцип горизонтальной прокрутки такой же, как изменение фиксированной высоты на фиксированную ширину. (Здесь без флуда)

  • вертикальная прокрутка

    Без лишних слов, давайте перейдем непосредственно к коду.

    <template>
  <div class="wrapper" ref="wrapper">
      <ul>
        <li v-for="item in 8">{{item}}</li>
      </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll';
    export default {
      mounted() {
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.wrapper);
        });
      }
    };
</script>
<style type="text/css">
  .wrapper{
    overflow:hidden;
    height:100vh;
  }
  ul li{
    height:400px;
  }
</style>

    Это демонстрация вертикальной прокрутки Vue BetterScroll, здесь нужно отметить два момента.

    • Может быть только один уровень родительского div, который является контейнером.
    • Родительский div должен быть настроен на переполнение и скрытие, а высота должна быть фиксированной.

  • Горизонтальная прокрутка

    Горизонтальная прокрутка по сравнению с вертикальной требует динамического доступа к ширине области прокрутки непосредственно в коде.

    <template>
  <div class="tab" ref="tab">
    <ul class="tab_content" ref="tabWrapper">
      <li class="tab_item" v-for="item in itemList" ref="tabitem">
          {{item.title}}
      </li>
    </ul>
  </div>
  </template>
  <script>
  import BScroll from 'better-scroll';
    export default {
      data() {
        return{
          itemList:[
          {
            'title':'关注'
          },
          {
            'title':'推荐'
          },
          {
            'title':'深圳'
          },
          {
            'title':'视频'
          },
          {
            'title':'音乐'
          },
          {
            'title':'热点'
          },
          {
            'title':'新时代'
          },
          {
            'title':'娱乐'
          },
          {
            'title':'头条号'
          },
          {
            'title':'问答'
          },
          {
            'title':'图片'
          },
          {
            'title':'科技'
          },
          {
            'title':'体育'
          },
          {
            'title':'财经'
          },
          {
            'title':'军事'
          },
          {
            'title':'国际'
          }
          ]
        }
      },
      created() {
        this.$nextTick(() => {
          this.InitTabScroll();
        });
      },
      methods:{
        InitTabScroll(){
          let width=0
          for (let  i = 0; i <this.itemList.length; i++) {
              width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
          }
          this.$refs.tabWrapper.style.width=width+'px'
          this.$nextTick(()=>{
              if (!this.scroll) {
                this.scroll=new BScroll(this.$refs.tab, {
                  startX:0,
                  click:true,
                  scrollX:true,
                  scrollY:false,
                  eventPassthrough:'vertical'
                });
              }else{
                this.scroll.refresh()
              }
          });
        }
      }
    };
  </script>
  <style lang="scss" scoped>
  .tab{
    width: 100vw;
    overflow: hidden;
    padding:5px;
    .tab_content{
      line-height: 2rem;
      display: flex;
      .tab_item{
        flex: 0 0 60px;
        width:60px;
      }  
    }
  }  
  </style>

    Горизонтальная прокрутка требует внимания.

    • Может быть только один уровень родительского div, который является контейнером.
    • Родительский контейнер для установки скрытой и фиксированной ширины переполнения
    • Динамически получить ширину области прокрутки

Из-за недавних потребностей проекта я проверил много информации из Интернета и не смог решить свою проблему.BetterScrollОфициальный сайт не предоставляет ссылку на демонстрационную версию, поэтому я использовал оставшееся время для написания этой статьи. Надеюсь, это может быть полезно для вас. нужно быть конкретнымdemoПожалуйста, переместите, не забудьте поставить звезду, писать статьи не просто, ставьте лайк!

Советы: приведенный выше код можно использовать напрямую, а друзья могут напрямую скопировать и протестировать после установки зависимостей~

Категории