vue2.0总结之BScroll的使用

本文是根据编写仿饿了么webapp时所总结的

1、当页面使用滚动组件时，在移动端触发点击事件，需要单独设置

<template>
  <div ref="demo" class="demo">
    <div class="demo-content">
      <span @click="addClick">内容高度超过页面高度就会滚动，此处的 .demo 要设置 overflow:hidden</span>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
export default {
  mounted(){

  },
  methods:{
    _initScroll: function(){
      this.scroll = new BScroll(this.$refs.demo,{
        click: true //设置点击事件为true，为false则不能触发点击事件
      });
      //也可以设置pageScroll ，可以区分多个页面滚动
      this.pageScroll = new BScroll(this.$refs.demo,{
        click: true //设置点击事件为true，为false则不能触发点击事件
      });
    },
    //但导致pc端和移动端点击不一致，pc端触发两次点击事件，通过以下设置保持一致。
    addClick(event) {
      //如果不是用户派发的点击事件，则直接返回，不进行任何操作。
      if (!event._constructed) {
        return;
      }
    }
  }
}
</script>

2、在一个组件中使用未定义的对象属性时，首次使用使用set声明

　　import Vue from 'vue'

　　Vue.set(this.food, 'count', 1);

 

　　

 

来源：oschina

链接：https://my.oschina.net/u/4325501/blog/4248235