vue学习实例一

不学则退，好好学习，天天向上。学习一门新框架，必须写实例才能加深理解。

SO,模仿支付应用管理界面写了个小页面，如下所示:

    顶部【我的应用】拖动排序使用了第三方插件vuedraggable,底部的菜单标题及底部滚动的内容使用了better-scroll，所有的应用图标都是使用的阿里的字体图标，点击【我和应用】和底部的应用图标的右上角【+】【-】可进行应用的添加删除。【我的应用】保存在localstorage中，添加删除时使用vuex管理数据，并更新到localstorage中。整个页面分上、中、下三个部分，具体如下：

1、顶部【我的应用】是固定在头部，用子组件drag-list.vue实现，代码如下：

因为应用个数不确定（设置的最多11个，即三行），所以高度的样式是根据应用个数动态计算的，放在计算属性中，并且高度的数值保存在vuex中，以便底下两块的margin-top能正常调整，代码如下：

computed: {
    calculateHeight() {
      return {
        'height': this.dragHeight + 'px'
      }
    },
    ...mapGetters([
      'dragHeight'
    ])

  }

拖动的方法如下：

methods: {
    onStart(evt) {
      this.isDragging = true
    },
    onMove(evt) {
      var item = evt.draggedContext.element
      return !item.fixed
    },
    onEnd(evt) {
      this.isDragging = false
      // 最后一个为空框，不允许拖到空框后面
      if (evt.newIndex > this.datalist.length - 1) {
        return false
      }
      this.sortDataList(evt)
    },
    ...mapMutations([
      'sortDataList'
    ])

  }

顶部有个空框表示还能继续添加应用，如果达到11个，则不显示虚框，同时虚框是不能拖动的，所以数据设置了fixed标记，在拖动的move事件中判断，如果fixed为false则可以拖动，否则不能拖动。在end事件中判断拖动的位置不能在虚框后面，并且将拖动的顺序更新到vuex中，调用sortDataList方法，方法如下：

sortDataList(state, evt) {
      let oldIndex = evt.oldIndex
      let newIndex = evt.newIndex
      if (oldIndex === newIndex) {
        return
      }
      let list = state.myDataList.slice()
      // 获取拖动的元素
      let item = list[oldIndex]
      // 并将其从数组中删除
      list.splice(oldIndex, 1)
      // 将拖动的元素插入到新的位置
      list.splice(newIndex, 0, item)
      updToLocal(list)
      state.myDataList = list
    }

2、底下两块区域的样式和头部是一样的，只是少了拖动，所以另外写了一个组件grid-menu.vue，和drag-list.vue共同的方法写在了mixin.js中。

3、底部标题头（如下图）横向滚动，内容竖向滚动，均使用了better-scroll。并且点击标题头，内容区域滚动到相应的应用，滚动内容区域时，标题也跟着联动

        import BScroll from 'better-scroll'

      // 横向的标题滚动
      this.titleScroll = new BScroll(this.$refs.titleWrap, {
        scrollX: true,
        scrollY: false,
        click: true
      })
      // 底部所有应用数据的滚动
      this.allListScroll = new BScroll(this.$refs.allListScroll, {
        probeType: 3,
        click: true
      })

完整的代码路径参考：https://github.com/bewhatyouare/vue-learn