@Component
struct Shopping {
@State services: Array<string> = ['直播', '进口','直播1',
'进口2','直播3', '进口4','直播5', '进口5','直播6', '进口6',
'直播7', '进口7',
'直播8', '进口8',
]
build() {
Column({ space: 5 }) {
Grid() {
ForEach(this.services, (service: string, index) => {
GridItem() {
Text(service)
}
.height('50%')
.backgroundColor(Color.Red)
}, (service:string):string => service)
}
// .rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性,当内容超出Grid区域时,可水平滚动。
.columnsTemplate("1fr 1fr 1fr")
.rowsGap(15)
.columnsGap(15)
.height("50%")
}
}
}
只需要设置columnsTemplate 不设置 rowsTemplate,超出GridView 高度的内容就可以滑动了。