微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据

效果图

小程序云开发分页加载代码

<!--pages/chatList/chatList.wxml-->
<view class="pageTitle">家博慧</view>
<view class=" search_arr"><icon class="searchcion" size='16' type='search'></icon><input class="" bindinput="input_p" placeholder="请输入关键字" value="{{searchValue}}" />
</view><view class="user_list"><view wx:for='{{list}}' wx:key="" class="item p_r"><image class="head" src="{{item.yun_file_id_arr[0]}}"></image><view class="loc">{{item.weizhi}}</view><view class="userName">{{item.name}}</view></view>
</view><my_tab></my_tab>

this.getData(Math.floor(Math.random()*1000)) ，是从0到1000条数据，随机获取从哪里开始的

const db = wx.cloud.database()
const _ = db.command
const col = "chat_user"
const sql = {_id: _.neq(1)
} //获取所有记录Page({data: {isEndOfList: false,list: [],limit: 20 //每次拉取数量},onLoad: function(options) {this.getData(Math.floor(Math.random()*1000))},getData: function(num) {db.collection(col).where(sql).skip(num?num:this.data.list.length).limit(this.data.limit).get().then(res => {this.setData({list: [...this.data.list, ...res.data], //合并数据isEndOfList: res.data.length < this.data.limit ? true : false //判断是否结束})})},onReachBottom: function() {!this.data.isEndOfList && this.getData()}
})

wxss

/* pages/chatList/chatList.wxss */
page {/* background-color: white; */
}.pageTitle {padding-top: 60rpx;padding-left: 20rpx;height: 140rpx;background-color: #EDEDED;
}.searchcion {margin: 16rpx 10rpx 10rpx 10rpx;position: absolute;right: 15rpx;z-index: 2;width: 20px;height: 20px;text-align: center;
}.search_arr {border: 1px solid #d0d0d0;border-radius: 50rpx;margin-left: 30rpx;position: fixed;width: 40%;top: 54rpx;left: 200rpx;
}.search_arr input {margin-left: 20rpx;height: 60rpx;border-radius: 5px;
}
swiper{position: fixed;width: 100%;
}
.swiper-item{width: 100%;height: 300rpx;
}
.item{position: relative;margin-bottom: 20rpx;
}
.head{width: 90rpx;height: 90rpx;border-radius: 10rpx;margin: 16rpx;
}
.user_list{position: relative;/* top: 320rpx; */padding: 20rpx 0 20rpx;background-color: white;
}
.userName{margin-left: 20rpx;border-bottom: 1rpx solid #d0d0d0;width: 82%;font-weight: normal;font-size: 32rpx;margin-top: 32rpx;padding-bottom: 10rpx;
}
.loc{
position: absolute;
right: 40rpx;
top: 40rpx;
}

微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据相关推荐

微信小程序如何自定义一个可输入筛选的下拉弹出框，也封装成组件。
在开发过程中,经常会遇到下拉框,有些时候内容过多,找起来也不方便,给他增加一个输入框,相当于用户输入某些信息,然后再下拉,符合输入内容的数据将会被展示出来,大大方便了用户操作体验. 话不多说,让我们开 ...
[小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
微信小程序原生开发功能合集二：下拉选择组件封装
本章实现小程序中下拉选择组件的封装实现,通过自定义组件的方式实现下拉选择功能,使用小程序的picker组件实现下拉数据的展示及相关自定义处理,封装数据加载过程,数据切换逻辑监听等. 本节实现s ...
微信小程序云开发提交表单数据和表单里上传的多张图片一起提交到数据库里完整代码
JS代码: const db = wx.cloud.database()Page({data: {xingming: '',xingbie: '',aihao: [],flog: true,image ...
【系】微信小程序云开发实战坚果商城-前端之订单实现
第 2-7 课:前端之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系] ...
微信小程序云数据库中实现分页
微信小程序提供skip来实现分页比如数据库中有数据100条 db.collection('story').skip(0).limit(10).get() 而skip就是第skip+1条,比如skip ...
微信小程序+云开发+数据库使用
微信小程序+云开发+数据库使用参考地址:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.ht ...
微信小程序云开发之数据分页云函数
微信小程序云开发之数据分页云函数 2018-10-06 20:23:28 微信小程序的云开发可以自己对数据库进行操作而不需要后台,那么很常见的一个功能就是我们在读取数据的时候需要分页来获取 ...
微信小程序·云开发云数据库的使用教程
最近一直在折腾微信小程序,刚开始是用的python tornado 加上MongoDB自己搭建的后台,做完了一个之后.打算纯粹的使用微信小程序云开发来做一个.这篇文章就是云数据库使用的一些总结. 刚开 ...
微信小程序云开发入门（二）-数据库详解
微信小程序云开发入门(二)-数据库详解接上一篇:微信小程序云开发入门(一) 摘要: 因为微信小程序云数据库有点类似传统的关系型数据库,但又有所不同.所以刚入手的时候会有点困扰,经过一段时间的学习和摸 ...

微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据

微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据相关推荐

最新文章

热门文章