初试 vue2.0——8.项目开发_better-scroll 实现移动端滑动1

写在前面的话：

　　额，原因是啥来着？忘咯，后补~

八、better-scroll + vue2.0 实现移动端滑动1

　　1. 首先引入依赖库（better-scroll），并安装：

　　　　　　

　　　　再 npm install

　　　　再 npm run dev

　　　　小备注：第一次安装的时候报错：

　　　　　　

　　　　然后我就换成 better-scroll  0.1.7版本的装了一次，居然成功了，但是提醒我最新版本：

　　　　　　

　　　　所以就又装了一遍 better-scroll  0.1.14版本，哈哈，成功了。但不清楚第一遍是怎么了~算了，继续往下

　　2. 使用方法：

　　　　之前Vue1.0是使用 v-el 指令来绑定元素，在Vue2.0中 被 ref 指令替代了，所以在Vue2.0中绑定DOM元素合一写成如下方式：

　　template中这样写~

<div class="menu-wrapper" ref="menu">
    一段内容1
</div>

<div class="foods-wrapper" ref="foodsWrapper">   <!-- 温馨提示：此处不可使用短横线命名的方式，如 此处写 foods-wrapper 是不行的
    一段内容2
</div>

　　温馨提示： template 中 ref="  某name  " 中，某name 不可使用短横线拼接命名的方式，

如foods-wrapper。然后 script 中使用相应驼峰 如foodswrapper，运行时会报错的，提示如下：

　　

　　script中这样用：

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'       //1.引入better-scroll
  const ERR_OK = 0

  export default{
    props: {
      seller: {
        type: Object
      }
    },
    data () {
      return {
        goods: []
      }
    },
    created () {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']

      this.$http.get('/api/goods').then((res) => {
        res = res.body
        if (res.errno === ERR_OK) {
          this.goods = res.data
          this.$nextTick(() => {       // 3 在这个函数中调用以防内容还未加载完就执行，获取不到元素的高度导致无法滑动
            //console.log(this)   //可以打印看看this的内容
            this._initScroll()
          })
        }
      })
    },
    methods: {
      _initScroll () {         // 2 函数声明
        this.menuScroll = new BScroll(this.$refs.menu, {})            //注意此处是 this.$refs.xxx
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
      }
    }
  }
</script>    

哈哈，试试，可以滚动啦~