介紹
本示例介紹使用Text硕淑、List等組件萍倡，添加點(diǎn)擊事件onclick,動(dòng)畫其垄，animationTo實(shí)現(xiàn)自定義Tab效果竖螃。
效果預(yù)覽圖
使用說明
- 點(diǎn)擊頁簽進(jìn)行切換彪笼，選中態(tài)頁簽字體放大加粗互妓，顏色由灰變黑盔粹，起到強(qiáng)調(diào)作用履婉，同時(shí)儡羔，底部顏色條橫線位移到當(dāng)前選中頁簽下方宣羊，內(nèi)容區(qū)翻頁到當(dāng)前選中頁簽對應(yīng)區(qū)域璧诵。
實(shí)現(xiàn)思路
- 頁簽實(shí)現(xiàn)：添加onClick方法，記錄點(diǎn)擊的index仇冯，index變化后之宿，改變頁簽顏色、字體大小苛坚，使用animateTo方法實(shí)現(xiàn)頁簽切換動(dòng)畫比被。 源碼參考CustomView.ets。
Text(title)
.textAlign(TextAlign.Center)
.height($r('app.integer.width_and_height_value4'))
.width(this.titleLengthRadix3 * title.length)
.fontColor(this.currentIndex == idx ?
(this.wantGoIndex == idx ? $r('app.color.background_color1'):$r('app.color.background_color2')):
(this.wantGoIndex == idx ? $r('app.color.background_color1'):$r('app.color.background_color2')))
.fontSize(this.currentIndex == idx ? $r('app.integer.font_size2') : $r('app.integer.font_size1'))
.fontWeight(this.currentIndex == idx ? FontWeight.Bold : FontWeight.Normal)
.onClick(() => {
if (this.currentIndex != idx) {
// 記錄點(diǎn)擊index
this.wantGoIndex = idx;
// 動(dòng)畫效果
animateTo({
duration: Math.abs(idx - this.currentIndex) * this.durationRadix,
curve: Curve.EaseInOut,
iterations: this.iterationsDefault,
playMode: PlayMode.Normal,
onFinish: () => {
this.currentIndex = idx;
this.scroller.scrollToIndex(this.currentIndex, true, ScrollAlign.START);
}
}, () => {
this.transitionX = this.getTransitionX(idx);
})
}
})
- 內(nèi)容區(qū)實(shí)現(xiàn)：使用List泼舱，添加滑動(dòng)手勢來進(jìn)行頁面的切換等缀，手勢響應(yīng)后，使用scrollToIndex方法來實(shí)現(xiàn)平滑的滑動(dòng)到相應(yīng)index娇昙。 源碼參考CustomView.ets尺迂。
PanGesture(this.panOption)
.onActionUpdate((event:GestureEvent) => {
if (!this.isStartAction) {
this.isStartAction = true;
if (event.offsetX < this.judgmentValue) {
if (this.currentIndex < this.titleArray.length - this.currentIndexRadix) {
let temIndex: number = this.currentIndex + this.currentIndexRadix;
this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START);
this.wantGoIndex = temIndex;
animateTo({
duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix,
curve: Curve.EaseInOut,
iterations: this.iterationsDefault,
playMode: PlayMode.Normal,
onFinish: () => {
this.currentIndex = temIndex;
}
}, () => {
this.transitionX = this.getTransitionX(temIndex);
})
}
} else {
if (this.currentIndex > this.judgmentValue) {
let temIndex: number = this.currentIndex - this.currentIndexRadix;
this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START);
this.wantGoIndex = temIndex;
animateTo({
duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix,
curve: Curve.EaseInOut,
iterations: this.iterationsDefault,
playMode: PlayMode.Normal,
onFinish: () => {
this.currentIndex = temIndex;
}
}, () => {
this.transitionX = this.getTransitionX(temIndex);
})
}
}
}
})
高性能知識點(diǎn)
scrollToIndex方法，開啟smooth動(dòng)效時(shí)冒掌，會對經(jīng)過的所有item進(jìn)行加載和布局計(jì)算噪裕，當(dāng)大量加載item時(shí)會導(dǎo)致性能問題
工程結(jié)構(gòu)&模塊類型
customview // har類型
|---view
| |---CustomView.ets // 視圖層-自定義視圖實(shí)現(xiàn)Tab效果
