リストプルダウンリフレッシュはHarmonyOS開発で非常によくある問題です。今日はリストプルダウンリフレッシュの機能を実装する方法を説明します。それは主に「開発準備」、「コード実装」、「運用効果」に分けられます。
-
開発の準備をするには、次の知識ポイントを学ぶ必要があります
1.1 [Harmony OS] [ARKUI][デモ]アニメーション実装の読み込み
1.2 PanGesture
1.4明示的および暗黙的な制御
-
コード
2.1データソースの準備
完全なデータソースの定義:毎回部分的なデータをロードするために使用されます
リスト表示データソースの定義:インターフェイスでのリスト表示に使用されますコードは次のとおりですprivate arr: string[] = ["A", "B", "C", "D", "E", "F", "G", "H"] //todo 当前list显示数据源 private AllData: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] //todo 全量数据
2.2 ListとListItem、[Harmony OS] [ARK UI] [Demo]を使用して、アニメーション実装をロードし、基本的なインターフェイスを描画します。コードは次のとおりです。
Column() { List({ space: 20, initialIndex: 0 }) { ListItem() { Column() { Image($r("app.media.loading")) .objectFit(ImageFit.Contain) .height(40) .aspectRatio(1) .width(40) .margin({ bottom: 5 }) .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) Text(this.loadingText) .fontSize(14) .fontColor("#ed6262") .backgroundColor(Color.White) } .alignItems(HorizontalAlign.Center) .padding({ top: 10, right: 0, bottom: 10, left: 0 }) .width("100%") .padding({ top: 10, right: 0, bottom: 10, left: 0 }) .backgroundColor(Color.White) } ForEach(this.arr, (item) => { ListItem() { Text('' + item) .width('100%') .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } }, item => item) } .listDirection(Axis.Vertical) // 排列方向 .onScrollIndex((firstIndex: number, lastIndex: number) => { //Todo firstIndex屏幕第一个可见条目索引 //todo lastIndex屏幕最后可见索引 this.firstIndex = firstIndex; }) }.width('100%')
2.3読み込み中のアニメーションの表示と非表示を制御する読み込み中のアニメーションの表示と非表示を制御するための表示と非表示のコントロール
を学習し、アニメーションの表示と非表示を制御するためのグローバル変数を定義できます。コードは次のとおりです。@State IsShowLoading: boolean= true//动画显示隐藏 默认是显示状态 .visibility((this.IsShowLoading ? Visibility.Visible : Visibility.None))//Todo 动画显示隐藏
2.4コントロールリストプルダウン更新アニメーション
更新しきい値:リストの最初の画面の表示インデックスが0の場合のみ、上下のプルダウン
が解放されたときにデータがロードされます。の最初の画面の表示インデックスリストが取得されます。Api、および値を取得するための変数を定義します。コードは次のとおりです。.onScrollIndex((firstIndex: number, lastIndex: number) => { //Todo firstIndex屏幕第一个可见条目索引 //todo lastIndex屏幕最后可见索引 this.firstIndex = firstIndex; })
2.5ジェスチャの判断、PanGestureドキュメントを参照、コードは次のとおりです
.parallelGesture( PanGesture({ distance: 150, direction: PanDirection.Down }) .onActionStart(this.ActionStart.bind(this)) .onActionUpdate(this.ActionUpdate.bind(this)) .onActionEnd(this.ActionEnd.bind(this)) .onActionCancel(this.ActionCancel.bind(this)) ) public ActionStart(event) { clearInterval(this.rotateTimeOut) if (this.firstIndex === 0 && this.arr.length > 0) { //判断是否刷新 this.IsShowLoading = true; this.loadingText = "开始刷新" } } private ActionUpdate() { clearInterval(this.rotateTimeOut)//Todo 取消之前动画 this.loadingText = "正在刷新" console.log(this.loadingText) } private ActionEnd() { this.loadingText = "开始刷新数据" console.log(this.loadingText) //开始刷新数据 this.loadingRotate(); this.loadingData(); //加载数据 } private ActionCancel() { //取消动画 this.IsShowLoading = false; this.loadingText = "刷新取消" console.log(this.loadingText) clearInterval(this.rotateTimeOut) }
2.6データの更新コードは次のとおりです
//ネットワーク負荷データprivate loadingData() { console.log("loadingData=====") var that = this; //延迟几秒执行这个代码 取消动画 setTimeout(function () { console.log("loadingData=====开始") var random=Math.ceil(Math.random()*10);; that.arr.splice(0,8) for(var i=random;i<random+8;i++){ that.arr.push(that.AllData[i]) } console.log("loadingData=====clearInterval") clearInterval(this.rotateTimeOut) console.log("loadingData===取消动画") that.IsShowLoading = false }, 5000) }
3.ランニング効果
3.1すべてのコードは以下の通りです@Entry @Component struct MyListView { private arr: string[] = ["A", "B", "C", "D", "E", "F", "G", "H"] //todo 当前数据源 private AllData: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] private firstIndex: number= 0; //-1 代表正常状态 0代表下拉刷新 1 代表上拉加载 @State loadingText: string = '正在刷新' //文本 @State IsShowLoading: boolean= true//动画显示隐藏 默认是显示状态 private rotateTimeOut: any //计时器 @State rotateAngle: number= 0; //加载图标旋转 loadingRotate() { this.rotateTimeOut = setInterval(() => { this.rotateAngle = 0 animateTo({ duration: 800 }, () => { this.rotateAngle = 360 }) }, 800) } public ActionStart(event) { clearInterval(this.rotateTimeOut) if (this.firstIndex === 0 && this.arr.length > 0) { //判断是否刷新 this.IsShowLoading = true; this.loadingText = "开始刷新" } } private ActionUpdate() { clearInterval(this.rotateTimeOut)//Todo 取消之前动画 this.loadingText = "正在刷新" console.log(this.loadingText) } private ActionEnd() { this.loadingText = "开始刷新数据" console.log(this.loadingText) //开始刷新数据 this.loadingRotate(); this.loadingData(); //加载数据 } private ActionCancel() { //取消动画 this.IsShowLoading = false; this.loadingText = "刷新取消" console.log(this.loadingText) clearInterval(this.rotateTimeOut) } //网络加载数据 private loadingData() { console.log("loadingData=====") var that = this; //延迟几秒执行这个代码 取消动画 setTimeout(function () { console.log("loadingData=====开始") var random=Math.ceil(Math.random()*10);; that.arr.splice(0,8) for(var i=random;i<random+8;i++){ that.arr.push(that.AllData[i]) } console.log("loadingData=====clearInterval") clearInterval(this.rotateTimeOut) console.log("loadingData===取消动画") that.IsShowLoading = false }, 5000) } build() { Column() { List({ space: 20, initialIndex: 0 }) { ListItem() { Column() { Image($r("app.media.loading")) .objectFit(ImageFit.Contain) .height(40) .aspectRatio(1) .width(40) .margin({ bottom: 5 }) .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) Text(this.loadingText) .fontSize(14) .fontColor("#ed6262") .backgroundColor(Color.White) } .alignItems(HorizontalAlign.Center) .padding({ top: 10, right: 0, bottom: 10, left: 0 }) .width("100%") .padding({ top: 10, right: 0, bottom: 10, left: 0 }) .backgroundColor(Color.White) } .visibility((this.IsShowLoading ? Visibility.Visible : Visibility.None))//Todo 动画显示隐藏 ForEach(this.arr, (item) => { ListItem() { Text('' + item) .width('100%') .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } }, item => item) } .listDirection(Axis.Vertical) // 排列方向 .onScrollIndex((firstIndex: number, lastIndex: number) => { //Todo firstIndex屏幕第一个可见条目索引 //todo lastIndex屏幕最后可见索引 this.firstIndex = firstIndex; }) .parallelGesture( PanGesture({ distance: 150, direction: PanDirection.Down }) .onActionStart(this.ActionStart.bind(this)) .onActionUpdate(this.ActionUpdate.bind(this)) .onActionEnd(this.ActionEnd.bind(this)) .onActionCancel(this.ActionCancel.bind(this)) ) }.width('100%') } }
3.2走行効果図は次のとおりです