提交 7856d47e 编写于 作者: Y yeyinglong

List Grid文档修改

Signed-off-by: Nyeyinglong <yeyinglong@hisilicon.com>
上级 53c15a75
......@@ -200,6 +200,7 @@ struct GridExample {
.width('90%')
.backgroundColor(0xFAEEE0)
.height(300)
.scrollBar(BarState.Off)
Button('next page')
.onClick(() => { // 点击后滑到下一页
this.scroller.scrollPage({ next: true })
......
......@@ -41,8 +41,8 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------ | ---------------------------------------- | ---- | ---------------------------------------- |
| space | number&nbsp;\|&nbsp;string | 否 | 子组件主轴方向的间隔。<br/>默认值:0<br/>**说明:** <br/>设置为除-1外其他负数或百分比时,按默认值显示。<br/>space参数值小于List分割线宽度时,子组件主轴方向的间隔取分割线宽度。 |
| initialIndex | number | 否 | 设置当前List初次加载时视口起始位置显示的item的索引值。<br/>默认值:0<br/>**说明:** <br/>设置为除-1外其他负数或超过了当前List最后一个item的索引值时视为无效取值,无效取值按默认值显示。 |
| space | number&nbsp;\|&nbsp;string | 否 | 子组件主轴方向的间隔。<br/>默认值:0<br/>**说明:** <br/>设置为负数时,按默认值显示。<br/>space参数值小于List分割线宽度时,子组件主轴方向的间隔取分割线宽度。 |
| initialIndex | number | 否 | 设置当前List初次加载时视口起始位置显示的item的索引值。<br/>默认值:0<br/>**说明:** <br/>设置为负数或超过了当前List最后一个item的索引值时视为无效取值,无效取值按默认值显示。 |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。<br/>**说明:** <br/>不允许和其他滚动类组件绑定同一个滚动控制对象。 |
## 属性
......@@ -181,6 +181,7 @@ struct ListExample {
}, item => item)
}
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
.onScrollIndex((firstIndex: number, lastIndex: number) => {
......@@ -231,6 +232,7 @@ struct ListLanesExample {
.border({ width: 3, color: Color.Red })
.lanes({ minLength: 40, maxLength: 40 })
.alignListItem(this.alignListItem)
.scrollBar(BarState.Off)
Button("点击更改alignListItem:" + this.alignListItem).onClick(() => {
if (this.alignListItem == ListItemAlign.Start) {
......@@ -289,6 +291,7 @@ struct ListExample{
}
}, item => item)
}.width('90%')
.scrollBar(BarState.Off)
}.width('100%')
Button('edit list')
......
......@@ -90,6 +90,7 @@ struct ListItemExample {
}
}, item => item)
}.width('90%')
.scrollBar(BarState.Off)
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
......@@ -97,54 +98,6 @@ struct ListItemExample {
![zh-cn_image_0000001219864159](figures/zh-cn_image_0000001219864159.gif)
```ts
// xxx.ets
@Entry
@Component
struct ListItemExample2 {
@State message: string = 'Hello World'
@Builder itemEnd() {
Row () {
Button("Del").margin("4vp")
Button("Set").margin("4vp")
}.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
}
build() {
Column() {
List({space:10}) {
ListItem() {
Text(this.message)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.swipeAction({ end:this.itemEnd})
ListItem() {
Text(this.message)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.swipeAction({ start:this.itemEnd})
}
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
```
![zh-cn_image_1501929990650](figures/zh-cn_image_1501929990650.jpg)
```ts
// xxx.ets
......
......@@ -99,12 +99,12 @@ struct ListItemGroupExample {
}
}, item => item)
}
.borderRadius(20)
.divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
})
}
.width('90%')
.sticky(StickyStyle.Header|StickyStyle.Footer)
.scrollBar(BarState.Off)
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册