初試 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>    

哈哈，試試，可以滾動啦~