鸿蒙Next GridView 翻页效果

@Component
struct Shopping {
  @State services: Array<string> = ['直播', '进口','直播1',
    '进口2','直播3', '进口4','直播5', '进口5','直播6', '进口6',
    '直播7', '进口7',
    '直播8', '进口8',
    '直播9', '进口9',
    '直播10', '进口10',
  ]

  scroller : Scroller = new Scroller();
  build() {
    Column({ space: 5 }) {
      Grid(this.scroller) {
        ForEach(this.services,(item:string,index:number)=>{
          GridItem(){
            Text(item)
              .backgroundColor(Color.Red)
              .textAlign(TextAlign.Center)
              .fontColor(Color.White)
              .width("50%")
              .height("50%")
          }
          .height("50%")
        });
      }
      .columnsTemplate('1fr 1fr 1fr')
      .height("50%")
      .columnsGap(15)

      Row({space: 20}) {
        Button('上一页')
          .onClick(() => {
            this.scroller.scrollPage({
              next: false
            })
          })

        Button('下一页')
          .onClick(() => {
            this.scroller.scrollPage({
              next: true
            })
          })
      }
    }
  }
}