vue常用插件

命名规范

http://www.h3399.cn/201703/59026.html

 

better-scroll + vue2.0 实现移动端滑动2——左右联动

引用better-scroll报错Cannot read property 'children' of undefined

DOM ,生成的代码会在引用的下一个div里面，

<div ref="main-content-wrapper" class="main-content-wrapper">

    <div class="main-content"></div>
</div>

 css,在当前div同层级上面一个，用relative

   .main-content-wrapper{
 　　position: absolute;
    top: 100px;
    bottom: .94rem;
    width: 100%;
    overflow: hidden;}

　　

js
//created里面调用_initScroll

created() {
  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
  this.$http.get('/api/goods').then((response) => {
    response = response.body;
    if (response.errno === ERR_OK) {
      this.goods = response.data;
      this._initScroll();
      console.log(this.goods);
//记得调用$nextTick更新数据是异步的

      this.$nextTick(() => {
        this._initScroll();
      });
    }
  });
},

/********************************************/
//

_initScroll()加下划线代表私有方法，不能被外部调用，不加下划线，代表可以被父组件调用此方法

_initScroll() {

this.$nextTick(() => {
  if (!this.scroll) {
    this.scroll = new BScroll(this.$refs['main-content-wrapper'], {
      // 默认它会阻止touch事件。所以在配置中需要加上click: true
      click: true
    })
  } else {
    // 重新计算
    this.scroll.refresh()
  }
})

 } }
或者直接

methods: {
  show() {
    this.showFlag = true;
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.food, {
          // 默认它会阻止touch事件。所以在配置中需要加上click: true
          click: true
        });
      } else {
        // 重新计算
        this.scroll.refresh();
      }
    });
  },
  hide() {
    this.showFlag = false;
  }
}

引用成功会出现

 

使用better-scroll @click事件在移动端无效

解决：加click:true

methods: {
      // 左边菜单点击事件
      selectMenu(index) {
        console.log(index);
      },
      _initScroll() {
        this.menuScroll = new BScroll(this.$refs['menu-wrapper'], {
          // 默认它会阻止touch事件。所以在配置中需要加上click: true
          click: true
        });
}

　　在pc端打印出来，会出现打印两次index的结果，解决方法，加事件

// 左边菜单点击事件
selectMenu(index, event) {
  if (!event._constructed) {
    return;
  }
  console.log(index);
},

shopcart购物车组件

转载于:https://www.cnblogs.com/summerXll/p/7454312.html