Extraiga y cargue subprogramas de WeChat y datos de páginas

Tabla de contenido

1. Levanta y carga la página.

2.carga desplegable con vista de desplazamiento

---

1. Levanta y carga la página.

El subprograma WeChat proporciona el evento pull-up onReachBottom(), enlace: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom

El evento onReachBottom() se puede llamar directamente.

Al realizar una llamada, compare la página actual con el número total de páginas para determinar si se deben actualizar los datos.

data: {
    list:'',//数据列表
    page:1,//请求的第几页
    size:10,  //每页多少条哦  
    totalpage:1,//总页数
  }, 
onShow() {
    this.getList()
  },
// 上拉事件
  onReachBottom(){
    if(this.data.page<=this.data.totalpage){
      this.getList()
    }
  },
 getList(){
    let page=this.data.page
     //接口参数
    let params={
      page: this.data.page,
      size: this.data.size
    }

    //获取数据的接口请求成功后
        page++
        this.setData({
          [`list[${this.data.page-1}]`]:items,//items:后台返回数据
          page:page,
          totalpage:res.data.totalpage
        })
        //... [`list[${this.data.page-1}]`]:items这种写法是为避免setData数据量过大,list数据在使用时需注意多循环一层

  },

<block class="" wx:for="{
   
   {list}}" wx:for-item="pitem" wx:for-index="pindex" wx:key="{
   
   {pindex}}">
   <view class="" wx:for="{
   
   {pitem}}" wx:key="{
   
   {index}}">{
   
   {item}}</view>
</block>

2.carga desplegable con vista de desplazamiento

Lea el documento https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

Aquí necesita usar dos atributos de umbral inferior, bindscrolltolower

umbral inferior: a qué distancia desde abajo/derecha se activa el evento de desplazamiento hacia abajo, el valor predeterminado es 50

bindscrolltolower: se activa al desplazarse hacia abajo/derecha

De hecho, no hay nada que decir, es lo mismo que tirar y cargar la página.

Nota : bindscrolltolower siempre se activará hacia abajo, es necesario definir una variable para controlar

.wxml

<scroll-view scroll-y="true" style="height: 100%;" lower-threshold="200" bindscrolltolower="scrollToLower">
</scroll-view>

.js

data: {
    list:'',//数据列表
    page:1,//请求的第几页
    size:10,  //每页多少条哦  
    totalpage:1,//总页数
    loading:false,//控制变量
  }, 
onShow() {
    this.getList()
  },
// scroll-view触底事件
  scrollToLower(){
    if(!this.data.loading && this.data.page<=this.data.totalpage){
      this.setData({
        loading:true
      })
      this.getList()
    }
  },
 getList(){
    let page=this.data.page
     //接口参数
    let params={
      page: this.data.page,
      size: this.data.size
    }

    //获取数据的接口请求成功后
        page++
        this.setData({
          [`list[${this.data.page-1}]`]:items,//items:后台返回数据
          page:page,
          totalpage:res.data.totalpage,
          loading:false
        })

  },