vue+better-scrollを使用して横スクロール効果を実現

   :  better-scroll：npm install better-scroll --save-dev
   :      better-scroll  import Bscroll from 'better-scroll'
              ：
  

  

    
1
    
2
    
3
    
4
    
5
  

          ，       div        ，    ref  dom；
    ul       li    ，        ，  N           ，
       ref  dom；    li             ，        
           。

  ，          

import BScroll from "better-scroll";
export default {
  name: "ReserveInfo",
  data() {
    return {};
  },
  created() {
    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: true,
            //          
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    }
  }
}

 html dom       ，  this.personScroll()  ，      ul     
     ；          ，         。