当前位置:网站首页>WeChat applet cloud development bottoms out paging

WeChat applet cloud development bottoms out paging

2022-09-23 08:12:03Xihong Mainland

WeChat applet cloud development bottomed out and paging

**摘要:**Most of the list paging on the mobile phone uses the method of loading the next page of data after the page bottoms out,It is relatively easy to develop the bottom paging function on the WeChat applet,Because the applet provides a pull-up and bottom-out functiononReachBottom,The bottoming distance can also be configured,对开发者非常友好!There is absolutely no need for developers to listen for bottoming events themselves,Let's practice how to implement drop-down and bottom-out combined with cloud development paging.
demo图:
Make a user account management page,Paging to get account data.
在这里插入图片描述
1、view文件:
The page needs to prompt loading or no more prompts,A field is required to identify whether it has been loaded.Refer to the code below for details

<scroll-view scroll-y="true" class="page show">
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-orange "></text> 账号
    </view>
  </view>
  <view class="cu-list menu">
    <view class="cu-item {
    {modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{
    {list}}" wx:key="index">
      <view class="content" data-account="{
    {item.accountId}}">
        <view class="text-grey">{
    {
    item.accountId}}-{
    {
    item.name}}-{
    {
    item.sex == 'boy'?'男':'女'}}</view>
      </view>
      <view class="action">
        <view class="text-green text-xs">学生</view>
      </view>
    </view>
  </view>
  <view class="cu-load bg-grey {
    {isLoad?'loading':'over'}}" wx:if="{
    {isShow}}"></view>
</scroll-view>

2、js代码:
Since this is cloud development,So you need to enable the cloud development function,可以查看我之前的文章微信小程序云开发入门(一).这里需要注意一下,Cloud development limits the maximum number of pages that can be obtained20条,Cloud functions can be obtained at most once100条.The only way to get more is through paging,And the data obtained is too much,The network transmission requirements are also very high,Therefore, it is recommended to obtain data through paging,To maximize the speed of page loading,提高用户体验.

const db = wx.cloud.database()
const _ = db.command
let isAll = false
Page({
    
    data: {
    
        list:[],//全部数据
        page:0,//页码
        isLoad:false,//是否加载完毕
        isShow:false//Whether to show the footer
    },
    onShow(){
    
         //重新初始化
        isAll = false
        this.setData({
    
            page:0,
            list:[],
            isLoad:false,
            isShow:false
        })
        //首次加载数据
        this.getPages()
    },
    getPages(){
    
        let that = this
        that.setData({
    
            isLoad:true,
            isShow:true
        })
      db.collection('users').skip(that.data.page).get().then(res=>{
    
            console.log('res', res)
            let list = that.data.list
            //Merge the newly acquired page count data
            list = list.concat(res.data)
            //When the number of pages obtained is not enough for one page, it is determined as the last page
            if(res.data.length < 20){
    
                isAll = true
                that.setData({
    
                    list:list,
                    isLoad:false
                })
            }else{
    
                that.setData({
    
                    list:list,
                    isShow:false
                })
            }
        })
    },
     /** * bottoming out */
    onReachBottom(){
    
        console.log('The pull-up bottoming event is triggered')
        if(isAll){
    
            return false
        }
        this.setData({
    
            page:this.data.page+20
        })
        //Each time you drop down the number of pages to increase and get data
        this.getPages()
    }
});

3、配置上拉触底距离
Bottom-up distance refers to the distance of the scroll bar from the bottom of the page.You can do it globally or on a page .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离.小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值.

页面依赖colorUi
点击引入colorUi

如果对你有帮助,看完别忘了转发,收藏~~

原网站

版权声明
本文为[Xihong Mainland]所创,转载请带上原文链接,感谢
https://chowdera.com/2022/266/202209230724117352.html

随机推荐