mpvue微信小程序实现tab切换横线滑动动画组件

学习前端快一年，对css动画方面研究甚少，一直想知道一些常见的动画是怎么实现的，也可以使项目体验变好。

需求：小程序常见的简单带线tab切换，线条滑动动画组件。

实现思路：v-for循环tab项，绝对定位线条，每次点击，运用'transform': 'translateX(**px）'，切换位置，在加上一些过渡效果。

难点：点击获得每次移动的距离和线条的长度。

解决方案：运用微信api  wx.createSelectorQuery();获得字体元素据左边的距离及每次的移动距离，如图：（不会录动图，效果自己想象吧哈哈哈）

 

子组件代码 

参数含义

nameList：tab切换的项目和绑定的值

      nameList: [
        {
          name: '全部',
          id: 0
        },
        {
          name: '待付款',
          id: 1
        },
        {
          name: '待发货',
          id: 2
        },
        {
          name: '已发货',
          id: 3
        },
        {
          name: '已完成',
          id: 4
        }
      ],

color：线条颜色

duration：动画完成时长

父组件运用 

    

// change事件

    tabChange(value) {
      console.log(value, 'value');
    }

 

踩坑

1. 以前写不带动画的tab线条时，用v-if实现每个字后面都有一条线，只是切换显隐状态，所以没有动画效果。要实现动画效果自始至终只有一条线，线条的宽度根据字体元素的宽度而定。看了vant-ui和elementUI的tab切换动画才明白过来的。

2. .exec()没加，获取不到rect的内容。

query.select(selectId).boundingClientRect(rect => {
        this.borderWidth = rect.width;
        this.navOffset = rect.left;
      }).exec();

备注

 这个组件非常简单，只是记录自己的学习过程和vantUI他们差的远了，还是要继续学习呀。