vue  实现better-scroll横向滚动

       首先需要引入better-scrollc 插件(better-scroll插件作用主要是解决移动端的滚动环境(已支持PC))。

npm install better-scroll --save

//组件文件中引入better-scroll

import BScroll from 'better-scroll'
 

       使用better-scrol

     首先的说一下滚动的方式,首先有两个容器,一个为父容器(绿色部分)且具有固定高度,宽度可选,一个子容器(黄色部分)1且高度会随内容的增多而变大(滚动的内容),宽度可选,当子容器的高度大于父容器时,就会滚动,反之不会滚动。

   横向滚动的方式同理可得!

    下面是横向滚动的示例代码:

 <div class="father_srcoll" ref="father_srcoll">
       <div class="child_scroll" ref="child_scroll">
         <div v-for="item,index in 20" style="width:50px;height:50px;">
            This is iotem{{item}}
         </div>
       </div>
     </div>


<script>
import BScroll from 'better-scroll';
export default {
    data: function () {
      return {
       width:0
      
      }
    },
 created(){
      this.$nextTick(() => {//回调横向滚动方法
         this.personScroll();
    });
    },
  GetNum() {
        this.width=120*3;
        return this.width;
      },//计算出横向滚动组件需要的总宽度

      personScroll() {
        this.$refs.child_scroll.style.width = this.GetNum() + "px";
        this.$nextTick(() => {
          if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.father_srcoll, {
            startX: 0,
            click: true,
            scrollX: true,//
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
      },//横向滚动
</script>
<style>
.father_scroll
{
  position: absolute;
    height: 180px;
    margin-top: 35px;
    width: 100%;
    overflow: auto;
    z-index:5;
}
.child_scroll{
   width: 100%;
    position: absolute;
    display: flex;
}
</style>

  

Logo

前往低代码交流专区

更多推荐