微信小程序自定义组件的使用，以分页加载为例_微信小程序页面改成组件加载-CSDN博客

本文链接：https://blog.csdn.net/weixin_49546967/article/details/119495096

当一段代码要复用时，就要考虑做成组件或者模板了，可千万别偷懒复制过去，否则有好受的。。。

组件可理解为一个部分页面，既有展示能力也有自己的逻辑处理（js），相当于一个可以单打独斗的小孩？

而模板便只是用来展示，没有js。

参考官方文档Component

参考民间博客Component组件

以下以我创建loadmore组件为例：实现了分页加载和页底提示的功能
在这里插入图片描述

组件的创建

1.loadmore组件的创建

在创建好的文件夹右键 - 新建Component

在这里插入图片描述

2.loadmore组件的json页面

自定义组件的 “component” 需为 true ，这里我还用了linui的组件 -。- 所以不同组件间也是可以互相使用的

{
  "component": true,
  "usingComponents": {
    "l-loadmore": "/pages/miniprogram_npm/lin-ui/loadmore/index"
  }
}

3.loadmore组件的wxml页面

这里可以写成自己喜欢的样式，组件的wxml和wxss和基本页面使用方法一样，就不再放wxss样例了。

<l-loadmore show="{{true}}" type="{{isReachBottom||isPullDown_tapALL?'loading':'end'}}"  line="{{true}}" loading-text="{{loadingText}}"  end-text="{{endText}}">
</l-loadmore>

4.loadmore组件的js页面

var util = require('../../utils/util.js')
/**
   页底提示 - 加载更多 
**/

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //加载的字体显示
    loadingText: {
      type: String,
      value: "努力加载中..."
    },
    // 完成时的字体显示
    endText: {
      type: String,
      value: "到底了"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    list: [], //列表
    total_amount:null,  //总共个数
    isPullDown_tapALL_search: false, //下拉标志默认为false
    pagenum: 1, //初始页默认值为1
    total_pages: 1, //总页数默认为1
    isReachBottom: false, //上拉标志
    request_data: {}, //请求data
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //获取列表
    async getList(url, isPullDown_tapALL_search, isReachBottom, request_data) {

      var that = this
      //下拉、点击全部、初次搜索 则重置重新拉取
      if (isPullDown_tapALL_search==true) {
        util.showLodaingIng("加载中")
        that.setData({
          isPullDown_tapALL_search: true
        })
        that.data.request_data = {}
        
        if (request_data != undefined && request_data != "") { //如果有搜索数据 ， 则直接赋值data
          that.data.request_data = request_data
        }
        that.data.pagenum = 1
        that.data.total_pages = 1
      }

      //触底则页数加1
      if (isReachBottom) {
        that.setData({
          isReachBottom: true
        })
        if (that.data.pagenum <= that.data.total_pages)
          that.data.pagenum = that.data.pagenum + 1
      }

      let data = that.data.request_data //发起请求的data
      data.page = that.data.pagenum
      let res
      try {
        res = await util.request_getList(url, data)
        
      } catch (error) {
        console.log("list fail")
      }
      
      let arr1 = that.data.list
      let arr2 = res.data.data

      if (isReachBottom) //触底加载更多，则数组连接
      {
        if (arr2 != null)
          arr1 = arr1.concat(arr2)
      } else {
        arr1 = arr2 // 下拉刷新或者点击全部，则数据直接更新为arr2
      }

      that.data.list = arr1
      that.data.total_pages = res.data.pagination.total_pages
      that.data.total_amount = res.data.pagination.total

      if (that.data.isReachBottom) {
        that.setData({
          isReachBottom: false
        })
      }

      if (that.data.isPullDown_tapALL_search) {
        that.setData({
          isPullDown_tapALL_search: false
        })
      }
      wx.hideLoading()
      that.triggerEvent("getList", arr1) //返回最新数据

    }

  }
})

其中 triggerEvent 触发事件方法可参考官方文档组件间通信与事件，可理解为扔一个响应给父页面接收。

组件的引用

1.引用页面中需在json中进行配置

{
  "usingComponents": {
    "loadmore":"/components/loadmore/loadmore"
  },
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "navigationBarTitleText": "实习生列表"
}

2.引用页面的wxml

<!-- 页底提示 Loadmore -->
<loadmore id="loadmore" bind:getList="getList"></loadmore>

需要有id属性值才能在js中selector选择。

bind:getList=“getList”，前一个getList为子组件发来的触发事件，后一个getList为自己在本页面的js中定义的函数名称
当然也是这里修改子组件的properties属性，比如要修改加载时内容，即为

< loadmore id=“loadmore” bind:getList=“getList” loadingText = “玩命加载中…”></ loadmore>

3. 引用页面的js

const url = "student_infos"

Page({

  data: {
    list: [],
  },

  onLoad() {
    var loadmore_ = this.selectComponent("#loadmore")
    loadmore_.getList(url)
  },

  //捕捉组件传来的list
  getList(e) {
    var that = this
    let list = e.detail
    that.setData({
      stuList: list
    })
  },

  //下拉刷新
  onPullDownRefresh() {
    var loadmore_ = this.selectComponent("#loadmore")
    loadmore_.getList(url, true, false)
    wx.stopPullDownRefresh()
  },

  //触底
  onReachBottom: function () {
    var loadmore_ = this.selectComponent("#loadmore")
    loadmore_.getList(url, false, true)
  },

})

其中 loadmore_ = this.selectComponent("#loadmore") 为父组件获取子组件的实例对象，获取了才能调用子组件的函数

组件中调用的util.request_getList() ,为自己封装的分页加载函数

util.js

const request_getList = (url_name, data) => {
  return new Promise((resolve, reject) => {
    wx.showNavigationBarLoading()
    wx.request({
      url: getApp().globalData.url + url_name,
      data: data,
      method: "GET",
      header: {
        'content-type': "application/json; charset=utf-8",
        'token': wx.getStorageSync('token')
      },
      success(res) {
        console.log("列表后台返回", res)
        if (res.statusCode == 200) {
          resolve(res)
        } else {
          showModalErrorAndMsg("加载失败", res)
          reject(res)
        }
      },
      fail: function (error) {
        // 发生网络错误等情况触发
        console.log("请求失败")
        showModalTowErrors("加载失败")
        reject(error)
      },
      complete() {
        wx.hideNavigationBarLoading()
      }
    })
  })
}

module.exports = {
  request_getList,
}

其实也就是对我上一篇博客微信小程序上拉加载，即分页加载的实现所进行的组件化，整合一起以后方便很多了。

总之是一次深刻的教训，以后再也不敢嫌麻烦直接一个一个页面复制来偷懒了。。。。