是不是很 俺沒精~? ?廢話不說請(qǐng)看
因?yàn)榭紤]到導(dǎo)航欄內(nèi)容不定徙垫,長(zhǎng)度都是通過計(jì)算讥裤,之后只需要改 tabList 即可。
wxml 結(jié)構(gòu)?
wxss 樣式
js
emmmm.. 有點(diǎn)冗余, 優(yōu)化一下
以上姻报,貼上代碼
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?對(duì)應(yīng)
??}
})
錄制 gif 的軟件是 ScreenToGif? 推薦 !?