vue学习实例一

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

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

vue学习实例一_第1张图片


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

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

vue学习实例一_第2张图片

因为应用个数不确定(设置的最多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

你可能感兴趣的:(vue学习系列)