小程序 下划线 动画

下划线动画

是不是很 俺没精~   废话不说请看

因为考虑到导航栏内容不定，长度都是通过计算，之后只需要改 tabList 即可。

wxml 结构 

wxss 样式

js

emmmm.. 有点冗余, 优化一下

---

以上，贴上代码

Page({

  data: {

    tabList: ['奥利给', '干了', '兄弟们'],

    cur: 0,

    lineLeft: 0,

    lineWidth: 100

  },

  onLoad: function (options) {

    let list = this.data.tabList;

    this.setData({

      lineLeft: 750 / list.length / 2 - 50

    })

  },

  switch(e) {

    let i = e.currentTarget.dataset.index,

      { cur, tabList } = this.data;

    if (cur == i) return;

    let itemWidth = 750 / tabList.length,

      interval = (Math.abs(i - cur));

    this.setData({

      cur: i,

      lineLeft: itemWidth * (i < cur ? i : cur) + itemWidth / 2 - 50,

      lineWidth: 100 * (interval + 1) + (itemWidth - 100) * (interval),

    })

    setTimeout(() => {

      this.setData({

        lineLeft: itemWidth * i + itemWidth / 2 - 50,

        lineWidth: 100

      })

    }, 300); //间隔与 transition 对应

  }

})

录制 gif 的软件是 ScreenToGif  推荐 !