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

效果图

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

<!--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>

js

    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;
}

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值