场景一:实现左滑阻尼效果
效果图
方案
在List组件上绑定滑动手势,在List里面最后一个ListItem内部放入Ellipse和Text组件,在滑动手势onActionUpdate回调里控制ListItemGroup组件的offset属性left参数和Ellipse的宽度达到左滑阻尼的效果。
核心代码
List({ initialIndex: 0, scroller: this.scroller }) {
ListItemGroup({ space: 20 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text('' + item)
.width(80)
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.offset({ left: this.offsetLeft })
ListItem() {
this.itemEnd()
}
}
.width('100%')
.height(120)
.scrollBar(BarState.Off)
.listDirection(Axis.Horizontal)
.edgeEffect(EdgeEffect.None)
.backgroundColor(0xDCDCDC)
.padding(10)
.onReachEnd(() => {
this.isEnd = true
console.log('is end')
})
.onScrollFrameBegin((offset: number) => {
console.log('offset', offset)
if (!this.scroller.isAtEnd()) {
this.isEnd = false
}
if (this.ellipseWidth > 0) {
return { offsetRemain: 0 }
}
return { offsetRemain: offset }
})
.parallelGesture(
PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
.onActionStart(() => {
this.slidOffsetX = 0
})
.onActionUpdate((event: GestureEvent) => {
if (event && this.isEnd) {
// 限制offsetLeft大于-60小于0
if (event.offsetX - this.slidOffsetX < -60) {
this.offsetLeft = -60
} else if (event.offsetX - this.slidOffsetX > 0) {
this.offsetLeft = 0
} else {
this.offsetLeft = event.offsetX - this.slidOffsetX
}
this.ellipseWidth = (-this.offsetLeft) / 1.5
} else {
// 已滑动的偏移量x保存下来,用于处理还未至底部就开始滑动的情况
this.slidOffsetX = event.offsetX
}
})
.onActionEnd((event: GestureEvent) => {
console.info('Pan end')
this.offsetLeft = 0
this.ellipseWidth = 0
if (event.offsetX < 0) {
console.log('跳转')
}
})
)
场景二:左滑删除,类似点击弹出swipeAction的效果
效果图
方案
在ListItem组件上绑定滑动手势,在滑动手势onActionUpdate事件里控制ListItem的属性offset的参数x的值,在onActionEnd事件里判断当前左滑的偏移量控制是否拉出删除按钮,最后给ListItem绑定点击事件,使用animateTo展开删除按钮。
核心代码
ListItem() {
Row() {
Text('item' + this.item.num)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
Row() {
Button('删除')
}
.width(120)
.justifyContent(FlexAlign.Center)
}
}
.offset({ x: this.item.offsetX })
.transition({ type: TransitionType.Delete, opacity: 0 })
.priorityGesture(
PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
.onActionUpdate((event: GestureEvent) => {
if (this.item.isDelShow) {
// 删除按钮显示状态
if (-120 + event.offsetX < -120) {
this.item.offsetX = -120
} else if (-120 + event.offsetX > 0) {
this.item.offsetX = 0
} else {
this.item.offsetX = -120 + event.offsetX
}
} else {
// 删除按钮未显示状态
if (event.offsetX < -120) {
this.item.offsetX = -120
} else if (event.offsetX > 0) {
this.item.offsetX = 0
} else {
this.item.offsetX = event.offsetX
}
}
})
.onActionEnd((_event: GestureEvent) => {
console.log('this.item.offsetX', this.item.offsetX)
if (this.item.offsetX > -60) {
animateTo({
duration: 300,
}, () => {
this.item.offsetX = 0
this.item.isDelShow = false
})
} else {
animateTo({
duration: 300,
}, () => {
this.item.offsetX = -120
this.item.isDelShow = true
})
}
})
)
.onClick(() => {
animateTo({
duration: 300,
}, () => {
this.item.offsetX = -120
this.item.isDelShow = true
})
})
最后
小编在之前的鸿蒙系统扫盲中,有很多朋友给我留言,不同的角度的问了一些问题,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,因为资料太多,太杂,教授的人也多,无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
为了确保高效学习,建议规划清晰的学习路线
GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助~
鸿蒙(HarmonyOS NEXT)最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
2.学习视频+学习PDF文档
HarmonyOS Next 最新全套视频教程 (鸿蒙语法ArkTS、TypeScript、ArkUI教程……)
纯血版鸿蒙全套学习文档(面试、文档、全套视频等)
鸿蒙APP开发必备
总结
总的来说,华为鸿蒙不再兼容安卓,对程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。