vue移动端开发(三)

购物开发

流程

• 1 主页(路由跳转)
• 2 配置路由
• 3 创建路由跳转的组件
• 4 编写接口 暴露接口
• 5 调用接口请求数据
• 6 渲染到页面

开发总结

1 时间戳过滤器

moment依赖

安装

cnpm i moment -S

配置

• src/filters/dataFmt/index.js

import Vue from 'vue'
import moment from 'moment'
Vue.filter('datafmt', data => {
  return moment(data).format('YYYY-MM-DD HH:mm:ss')
})

使用

 <p>上架时间:{{data.add_time | datafmt}}</p>

2 加入购物车半场动画

• getBoundingClientRect// 获取元素的位置
  

定义

<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
   <div class="ball" v-show="ball"></div>
 </transition>
<van-button type="danger" size="small" @click="addCar" :disabled="flag">加入购物车</van-button>

配置

• 必须带单位px
• 动画没走完时,禁用按钮
  • 在点击事件中绑定,点击后禁用,定时器时长大于动画时长(改变按钮状态)

data: () => {
    return {
      ball: false,
      flag: false
    }
  },
methods:{
    beforeEnter (el) {
      el.style.transform = 'translate(0,0)' // 起始位置
    },
    enter (el, done) {
      const ball = document.querySelector('.ball').getBoundingClientRect()
      const add = document.querySelector('.van-info').getBoundingClientRect()
      const x = add.x - ball.x
      const y = add.y - ball.y
      el.offsetLeft
      el.style.transform = `translate(${x}px,${y}px)`
      el.style.transition = 'all 0.4s ease'
      done()
    },
    afterEnter () {
      this.ball = !this.ball
    },
    addCar () {
      this.ball = !this.ball
      this.flag = true
      setTimeout(()=>{
        this.flag = false
      },500)
    },
}

使用

<van-button type="danger" size="small" @click="addCar" :disabled="flag">加入购物车</van-button>

总结

• getBoundingClientRect 可以获取元素位置