Harmonyos Next Cangjie Language Development Practical Tutorial: Scroll Down to Refresh and Scroll Up to Load More

In mobile applications, various list pages cannot do without pull-down refreshing and pull-up loading more. The same is true for our mall application. Today, let's introduce how to achieve this function in the Cangjie development language.

Pull down to refresh

The Cangjie development language directly provides a pull-down Refresh component called Refresh, which is also very convenient to use:

@State var headerLoading : Bool = false; 

Refresh(RefreshParams(refreshing: @Binder(this.headerLoading))) {
List{
        ForEach(this.carList,
        itemGeneratorFunc:{

            item:CarItem, index: Int64 => ListItem {
            }
            })
    }
}
.onRefreshing({ => 
    Timer.once(Duration.second*2,{=>
            this.headerLoading = false
           })
    AppLog.info('onRefreshing')
    })
.onStateChange({state =>
     AppLog.info('onStateChange')
    }) 

The above code demonstrates the basic use of Refresh and simulates the network loading effect with a timer. After two seconds, it automatically loads. Here, onRefreshing is the callback for entering the refresh state, and onStateChange is the callback for changing the refresh state.

The usage of timers also needs to be familiarized with by everyone again. Timer.once indicates a one-time Timer, and Duration.second*2 indicates an execution interval of 2 seconds. This way of writing is rather unique.

Pull up to load more

Regarding more about pull-up loading, there is no content on this part in Cangjie's documentation. Youlan Jun has written a solution by referring to ArkTs, which is only for your reference.

The implementation idea is to add a loading animation component at the last line of the List, which is hidden by default. When the List slides to the last line, the loading animation will be displayed and data requests will start. The specific code is as follows:

@State var footerLoading:Bool = false

List{
    ForEach(this.carList,
        itemGeneratorFunc:{

            item:CarItem, index: Int64 => ListItem {
            }
            })

    ListItem {
        if(this.footerLoading){
            Row(12){
                LoadingProgress()
                .height(40)
                .width(40)

                Text('加载中...')
                .fontSize(14)
                .fontColor(Color.GRAY)
            }
            .width(100.percent)
            .height(50)
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Center)
        }
    }
}
.onScrollIndex({startNum,endNum =>
    if(Int64(endNum) >= this.carList.size - 1){
            this.footerLoading = true
            Timer.once(Duration.second*3,{=>
                        this.footerLoading = false
                    })
    }
    CJTools.log('endNum-list:' + this.carList.size.toString())
    }) 

What needs to be noted in the above code is how to determine if the list has slid to the bottom, mainly to determine the length of the array. In Cangjie, the length attribute of an array is size, and its type is Int64.

The above is today's content sharing. Thank you for reading.