分页功能实现

一、当需要做分页功能时使用原理，如何去做实现

1.定义数据

//定义数据
data:{
  typesList:[],
  type:'全部',
  list:[],
  page:1,
//加载更多，需要做节流，节流标识（是否有更多数据、是否加载中、是否滚动到底部）
  hasMore:true,
  loading:true,
  height:300
}

2.如果有更多数据，并且没有处于加载中就可以加载更多数据

if(this.data.hasMore && !this.data.loading){
//在处于有更多数据 和 不是加载时 再进行页数增加开启加载获取数据
  this.setData({
   page：this.data.page + 1,
   loading:true
},()=>{
  this.getList()
})
}

3.如果是第一页直接赋值，如果不是第一页需要把之前数据和现在的数据进行连接

let nowList =result.data.rows.map(it=>{
//在数据有图片时，需要将代理域名网址 加上 图片的地址拼接 来返回给data图片属性获取地址 
   it.img = baseUrl + it.banner[0].path
   return it
})
this.setData({
   list:this.data.page === 1 ? nowList : [...this.data.list,...nowList],
   hasMore:this.data.page * 4 < result.data.total
})

//如果是列表数据是第一页，就显示当前数据，不是则就展示当前加上新的数据页面
//加载更多 是当前页总数据 小于 返回来的数据总数据 就会开启加载更多

4.赋值和渲染是异步的，所以节流标识需要异步进行重置

//在组件化开发上 赋值和渲染数据是异步的，
//所以节流标识是可以需要用定时器来进行异步重置 loading:false 数据
setTimeout(()=>{
  this.setDtata({
  loading:false
})
})

changeType(evt){
  this.setData({
  type:evt.target.dataset.type,
  loading:true,
  page:1,
  list:[]
},()=>{
  this.getList()
})
}

5.最后 微信获取 dom节点 写法

//documen.body.getBoundingClientRect()
onReady(){
  let query = wx.createSelectorQuery()
  query.select('#nodeBox').boundingClientRect().exec((obj)=>{
   this.setData({
   height:obj[0].height
})
})
}
//主要是拿取dom节点