数据库查询分页（小程序）

小程序实现图片分页

主要用到的知识点：

1.es6语法

数组的合并-----a=[…a1,…c]，这里a1：代表原来的数组，c：代表新的数组。整体意思是：将原来的数组a1与新来的数组c进行合并为一个新的数组a

2.事件

2.触底事件：onReachBottom（{})

3.文字提示：

wx.showToast({
title: ‘加载完毕’,
icon: ‘success’,
duration: 1500,
})

4.加载提示（滚动的圆圈）：

wx.showLoading({
title: ‘加载中’
})
取消加载提示：
wx.hideLoading({
success: (res) => { },
})

5.用到的云开发中的分页函数
其中
skip：为查询起点。
limt：查询范围
这里使用异步处理。
需要注意一点：异步函数的执行永远在主线程执行完后执行。
如果使用了异步处理，一定要注意代码的执行顺序。

比如，你可能有这样一个需求：你需要用到异步函数的返回值来进行判断。那么这个是永远行不通的。因为你接收异步函数的那个为同步执行，所以永远在异步完成之前执行。这样你永远都得不到异步函数执行所返回得结果。

如果你需要接收异步函数得返回值。那么你必须保证这两个都是异步执行。这样才能够得到异步函数返回得结果。

异步函数得执行顺序：为排在前面得先执行，但是前面得有延时。比如setTimout（function，2000ms),则会先执行之后得函数。即。有空余时间就会去先执行其他得异步处理事情。

db.collection(that.data.parm.table).skip(that.data.parm.skip).limit(that.data.parm.limit)
      .get()
      .then(res => {
        console.log(res)
        if (res.data.length == 0 || res.data == null) {
          wx.hideLoading({
            success: (res) => { },
          })
          that.data.hasData = false
          return;
        }
        else {
          //将数据存入imgList中
          that.setData({
            //可以实现数组拼接，es6的语法
            imgList: [...that.data.imgList, ...res.data]
          })
          console.log("图片数据:")
          console.log(that.data.imgList)
          wx.hideLoading({
            success: (res) => { },
          })
        }
      })
      .catch(err => {
        console.log(err)
      })
  },

废话不多说，下面上代码。
先给你们看下效果图：

1.wxml代码

<view class="top_container">
  <view class="title"><text>下面时图片的展示</text></view>
  <button type="primary" class="" bindtap="showImage">显示图片</button>
</view>
<!-- 图片容器 -->
<view class="container">
  <!-- 每张的图片内容 -->
  <view class="img_content" wx:for="{{imgList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
    <image src="{{item.url}}"></image>
  </view>
</view>

2.wxss代码：

page {
  height: 100%;
  /* width: 100%; */
}
.top_container{
  text-align: center;
  color: rgb(71, 85, 209);
}
.title text{
  /* 无法设置居中 */
  text-align: center;
  font-weight: bold;
}
.container {
  display: flex;  
  flex-wrap: wrap;
  flex-direction:row;
  /* justify-content: center; */
  align-items: left;
  margin-top: 20px;
  /* background-color: red;   */
}

.img_content { 
  width: 48%;
  border: 1px solid pink;
  margin-left: 3px;
}

.img_content image {
  width: 100%;
  height: 250px;  
}

button {
  height: 50px;
  margin-top: 10px;
  display: block;
}

3.js代码

//index.js
const app = getApp()
const db = wx.cloud.database()
const _ = db.command
Page({
  data: {
    userInfo: {},
    imgList: [],
    parm: {
      skip: 0,
      table: 'Image',
      limit: 5,
    },
    //放置恶意点击 图片显示按钮
    count: 0,
    hasData: true
  },
  showImage(event) {
    var that = this
    if (!that.data.hasData) {
      wx.showToast({
        title: '请勿重复点击',
        icon: 'none',
        duration: 1500
      })
    } else {
      if (that.data.count >= 1) {
        return;
      } else {
        //用于查询库
        this.queryImage()
        that.data.count++
      }

    }
  },
  // 查询图片数据
  queryImage() {
    wx.showLoading({
      title: '加载中'
    })
    var that = this
    db.collection(that.data.parm.table).skip(that.data.parm.skip).limit(that.data.parm.limit)
      .get()
      .then(res => {
        console.log(res)
        if (res.data.length == 0 || res.data == null) {
          wx.hideLoading({
            success: (res) => { },
          })
          that.data.hasData = false
          return;
        }
        else {
          //将数据存入imgList中
          that.setData({
            //可以实现数组拼接，es6的语法
            imgList: [...that.data.imgList, ...res.data]
          })
          console.log("图片数据:")
          console.log(that.data.imgList)
          wx.hideLoading({
            success: (res) => { },
          })
        }
      })
      .catch(err => {
        console.log(err)
      })
  },

  //触底事件
  onReachBottom(event) {
    var that = this
    if (!that.data.hasData) {
      wx.showToast({
        title: '加载完毕',
        icon: 'success',
        duration: 1500,
      })
      return;
    }
    else {
      that.queryImage()
      //skip每次加10  
      that.data.parm.skip += that.data.parm.limit
    }
  },

  getUserInfo(event) {
    var that = this
    that.setData({
      userInfo: { age: 18 }
    })
  },
  onLoad() {
    // console.log(wx.getUserProfile)
  }

})