当前位置： 移动技术网 > IT编程>脚本编程>vue.js > better-scroll实现横向和纵向双向滚动

better-scroll实现横向和纵向双向滚动

2020年07月24日  | 移动技术网IT编程  | 我要评论

因项目需要，要实现横向和纵向双向滚动的功能，自己手写了一个结果ios和android不兼容。。。
在这里插入图片描述
后来发现大神的better-scroll可以实现，但也是频频踩坑，这几个配置间有冲突，搞不好还不能实现双向滚动，结果要加班，哈哈
在这里插入图片描述
那接下来就总结一下我实践成功的方法，先看效果图

在这里插入图片描述

开始讲解
在这里插入图片描述

环境和版本

这个是在vue中自己封装的组件

"vue": "^2.5.2",
"better-scroll": "^1.15.2",

组件

<template>
  <div>
    <div class="person-wrap" ref="personWrap">
      <ul class="person-list" ref="personTab">
        <li class="person-item">1</li>
        <li class="person-item">2</li>
        <li class="person-item">3</li>
        <li class="person-item">4</li>
        <li class="person-item">5</li>
      </ul>
    </div>
  </div>
</template>

核心js

<script>
import BScroll from "better-scroll";
export default {
  components: {BScroll},
  data() {
    return {};
  },
  mounted(){
    this.$nextTick(() => {
      this.personScroll();
    });
  },
  methods: {
    personScroll() {
      // 默认有六个li子元素，每个子元素的宽度为120px
      let width = 6 * 120;
      this.$refs.personTab.style.width = width + "px";
      // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.personWrap, {
            startX: 0,
            click: true,
            // 划重点：核心所在，只写 scrollX， eventPassthrough就行了，写多了会冲突
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    }
  }
};
</script>

样式: 用的是stylus，用之前请安装stylus,否则会报错哈，具体安装使用就不介绍了

<style lang="stylus" scoped>
.person-wrap{
  width 98%
  border 1px solid #333
  padding 10px 0
  box-sizing: border-box
  overflow hidden
  margin auto
}
.person-list{
  display flex
}
.person-item{
  flex 1
  width 120px
  line-height 100px
  margin 10px
  border 1px solid #333
  text-align center
}
</style>

这个组件也可以当页面之间运行，重点说一下

eventPassthrough 的值是’vertical’,而不是 ‘horizontal’。
freeScroll、scrollX、eventPassthrough（horizontal）都是支持横向滚动，但是彼此之间会互斥。
所以只要设置这两个就行了： scrollX: true, eventPassthrough: “vertical”

好了，到此总结完毕，如果帮你出坑了，请点个赞哈
在这里插入图片描述

本文地址：https://blog.csdn.net/u012570307/article/details/107540273

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网