手动有缝轮播--better-scroll

这个轮播是需要手动左右滑动的：

1.安装better-scroll

npm install better-scroll --save

2.可以全局引入也可以在vue组件中引入

import BScroll from 'better-scroll'

3.template里面写入html

     <div class="tab" ref="tab">
              <ul class="tab_content" ref="tabWrapper">
               // 把图片还有标题写在data里面循环出来
                <li class="tab_item" v-for="(item,i) in itemList" :key="i" ref="tabitem"> 
                    <div class="tab_img">
                      <img :src="item.imgurl" alt="">
                    <div class="tab_title">{{item.title}}</div>
                  </div>
                </li>
              </ul>
             </div>

4.js写轮播的方向X,Y轴

     // 滚动轮播
        InitTabScroll () {
          let width = 0
          for (let i = 0; i < this.itemList.length; i++) {
            width +=
            // getBoundingClientRect()返回元素的大小及其相对于视口的位置
            this.$refs.tabitem[0].getBoundingClientRect().width + 11 
          }
          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()
            }
          })
        },

5.请记得在created调用此方法

this.InitTabScroll()

使用这个轮播很流畅，图片文字的多少需要自己添加，样式直接用flex布局即可！