better-scroll

    

        

            很多内容
        
    
    

 watch: {
    seller() { // 获取到的数据
      this.$nextTick(() => {
        this._initScroll()
      })
    }
  },
  created() {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  mounted() {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  methods: {
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.sellers, {
          click: true
        })
        console.log(this.scroll)
      } else {
        this.scroll.refresh()
      }
    }
  }

开启复制粘贴之旅，这是我琢磨出来的一套比较完美的代码，原理是知道的，但是讲出来也是在说别人的话，拿过来用就好，能解决自己的业务需求

---

上面总结的是有错误的，代码不够简洁

  mounted() {
    this._initScroll()
    this._initPicScroll()
  },
  watch: {
    seller() {
      this._initScroll()
      this._initPicScroll()
    }
  },
  methods: {
    _initScroll() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.sellers, {
            click: true
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
    _initPicScroll() {
      this.$nextTick(() => {
        if (this.seller.pics) {
          let picWidth = 120
          let margin = 6
          let width = (picWidth + margin) * this.seller.pics.length - margin
          this.$refs.imgWrapper.getElementsByClassName('imgs-hook')[0].style.width = width + 'px'
          if (!this.picscroll) {
            this.picscroll = new BScroll(this.$refs.imgWrapper, {
              scrollX: true
              // hasHorizontalScroll: 'vertical'
            })
          } else {
            this.picscroll.refresh()
          }
        }
      })
    }
  }

完美的格式，横向滚动与纵向滚动

---

布局也很重要

这是一个基础的布局，外层是一个大盒子，固定宽高，溢出隐藏，内层再套一个小盒子，直接写其内容

我比较喜欢的是他的top与bottom同时设定，很有意思