ListItem 语法
注意
- 最重要的就是 swiperAction 属性
ListItem 参数
参数定义
js
interface ListItem {
style:ListItemStyle.Card || ListItemStyle.NONE
}参数用法
js
@Entry
@Component
struct Index {
@State list: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
private scrollController: ListScroller = new ListScroller();
build() {
List({ space: 20, scroller: this.scrollController }) {
ForEach(this.list, (item: string, index: number) => {
ListItemGroup() {
ListItem({
style: ListItemStyle.CARD
}) {
Column() {
Text("内容" + item.toString())
.width('100%')
.textAlign(TextAlign.Center)
}
}
.width('90%')
.height(100)
.backgroundColor(Color.Pink)
.onClick(() => {
this.scrollController.scrollBy(0, 300)
})
}
})
}
.width('100%')
.scrollBar(BarState.Off)
}
}ListItem 属性
属性定义
js
interface swipeAction{
// 向右滑动触发
start:SwipeActionItem,
// 向左滑动触发
end:SwipeActionItem,
// 滑动触发动画效果 SwipeEdgeEffect.Spring 有回弹 SwipeEdgeEffect.None 无回弹
edgeEffect: SwipeEdgeEffect.Spring || SwipeEdgeEffect.None
// 滑动操作偏移量更改的时候调用
// 获取到滑动的偏移量
// 往左边划就是负数 往右边划就是正数
onOffsetChange:(offset:number)=>void
}
interface SwipeActionItem{
// 触发下面事件的距离 数值越小触发越快,数值越大越不触发,不触发原本的列就不会消失
actionAreaDistance: number,
// 进入删除区域的时候 触发
onEnterActionArea:()=>void,
// 离开删除区域的时候 触发
onExitActionArea:()=>void,
// builder 构建删除区域的内容
builder:()=>void
// 当列表项目滑动状态变化的时候触发
// 进入删除区域的时候触发, 退出删除区域的时候触发
onStateChange:()=>void
}属性用法
js
// xxx.ets
@Entry
@Component
struct Index {
@State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
private scroller: ListScroller = new ListScroller()
@Builder
itemEnd() {
Row() {
Button("Delete").margin("4vp")
Button("Set").margin("4vp").onClick(() => {
this.scroller.closeAllSwipeActions()
})
}.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
}
build() {
Column() {
List({ space: 10, scroller: this.scroller }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("item" + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.Red)
}
.swipeAction({
// 滑动效果 是否有回弹
edgeEffect: SwipeEdgeEffect.Spring,
// 滑动的距离
onOffsetChange: (offset: number) => {
// console.info(offset.toString())
},
// 往左边滑动
end: {
// 触发下面事件的距离
actionAreaDistance: 1,
// 状态改变的时候触发
onStateChange: () => {
console.info("状态改变")
},
// 显示划走后的内容
builder: () => {
this.itemEnd()
},
// 进入删除区的动作
onAction: () => {
console.info("删除Item")
animateTo({ duration: 1000 }, () => {
// let index = this.arr.indexOf(item)
// this.arr.splice(index, 1)
})
},
// 进入删除区域的事件
onEnterActionArea: () => {
console.info("进入到删除区域")
},
// 退出删除区域的事件
onExitActionArea: () => {
console.info("退出到删除区域")
}
}
})
}, (item: string) => item)
}
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}ListItem 事件
无
示例
侧滑效果
js
// xxx.ets
@Entry
@Component
struct Index {
@State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
@State enterEndDeleteAreaString: string = "not enterEndDeleteArea"
@State exitEndDeleteAreaString: string = "not exitEndDeleteArea"
private scroller: ListScroller = new ListScroller()
@Builder
itemEnd() {
Row() {
Button("Delete").margin("4vp")
Button("Set").margin("4vp").onClick(() => {
this.scroller.closeAllSwipeActions()
})
}.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
}
build() {
Column() {
List({ space: 10, scroller: this.scroller }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("item" + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.Red)
}
.swipeAction({
// 滑动效果 是否有回弹
edgeEffect: SwipeEdgeEffect.Spring,
// 滑动的距离
onOffsetChange: (offset: number) => {
// console.info(offset.toString())
},
// 往左边滑动
end: {
// 触发下面事件的距离
actionAreaDistance: 1,
// 状态改变的时候触发
onStateChange: () => {
console.info("状态改变")
},
// 显示划走后的内容
builder: () => {
this.itemEnd()
},
// 进入删除区的动作
onAction: () => {
console.info("删除Item")
animateTo({ duration: 1000 }, () => {
// let index = this.arr.indexOf(item)
// this.arr.splice(index, 1)
})
},
// 进入删除区域的事件
onEnterActionArea: () => {
console.info("进入到删除区域")
},
// 退出删除区域的事件
onExitActionArea: () => {
console.info("退出到删除区域")
}
}
})
}, (item: string) => item)
}
Text(this.enterEndDeleteAreaString).fontSize(20)
Text(this.exitEndDeleteAreaString).fontSize(20)
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}- 距离是 300 的
- 距离是 1 的