是不是很 俺没精~ 废话不说请看
因为考虑到导航栏内容不定，长度都是通过计算，之后只需要改 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 推荐 !
