场景一:实现左滑阻尼效果
效果图
方案
在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)
.backgroundC