微信小程序 behaviors进阶实现 list 列表优化

behaviors 介绍

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。

详细的参数含义和使用请参考 链接: Behavior 参考文档

list Behaviors js文件设置

整体list 请求默认参数以及返回值处理集中在behaviors中 ，抛出相关其他处理函数

函数名	用途
afterGetList	除去默认拼接list 其他data值的处理
getListError	加载错误的其他的处理
beforeGetMore	除了是否存在下一页和是否加载中判断外的其他判断

import request from "../utils/http";

module.exports = Behavior({
  behaviors: [],
  properties: {
  },
  data: {
    list: [],
    listLoading: false,
    hasMore: true,
    pageSize: 20,
    pageIndex: 1,
  },
  methods: {
    /**
      * @description: 获取列表数据
      * @param {*} isFirst 是否首次加载
      * @param {*} data 除了分页外其他data
    */
    async getListData({ isFirst = false, url = '', data = {} }) {
      let { listLoading, pageIndex, pageSize, list, hasMore } = this.data;
      //加载中不重新请求
      if (listLoading) return
      if (isFirst) {
        list = [];
        pageIndex = 1;
        this.setData({ list: [], pageIndex: 1 });
      }
      this.setData({ listLoading: true })
      try {
        let result = await request({ url, data: { pageSize, pageIndex, ...data } });
        hasMore = pageSize * pageIndex > result.count ? false : true;
        this.afterGetList && (result = this.afterGetList(result));
        list = list.concat(result.list)
        this.setData({ list, hasMore, listLoading: false });

      } catch (error) {
        this.setData({ listLoading: false })
        this.getListError && this.getListError();
      }
    },
//加载下一页  默认判断是否在加载中，和是否存在下一页，另外判断可放在beforeGetMore 函数中
    getMore() {
      let { listLoading, hasMore, pageIndex } = this.data;
      let checkBeforeData = true
      this.beforeGetMore && (checkBeforeData = this.beforeGetMore());
      if (listLoading || !hasMore || !checkBeforeData) { return }
      this.setData({ pageIndex: pageIndex + 1 })
      this.getList()
    }
  }
})

page 页面对于behaviors 的使用

提示：这里设置的data 能覆盖behaviors文件中设置的初始data

import { DeleteMemberAddress, GetMemberAddressList, UpdateMemberAddress } from "../../../api/user";
var listBehavior = require('../../../behaviors/list')

Page({
  behaviors: [listBehavior],
  data: {},
  onLoad(options) {
    this.getList();
  },
  getList() {
    this.getListData({ isFirst:true, url: GetMemberAddressList });
  },
  //上拉触底，加载下一页
 onReachBottom(){
    this.getMore();
 }
})

behaviors 使用注意组合规则

• 如果有同名的属性 (properties) 或方法 (methods)
  1. 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法； 若组件本身无这个属性或方法，则在组件的
  2. behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
  3. 在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法。
• 如果有同名的数据字段 (data)：
  1. 若同名的数据字段都是对象类型，会进行对象合并
  2. 其余情况会进行数据覆盖，覆盖规则为： 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）
• 生命周期函数和 observers 不会相互覆盖，而是在对应触发时机被逐个调用：
  1. 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
  2. 对于同种生命周期函数和同字段 observers ，遵循如下规则：
  - 优先于组件执行；
  - 被引用的 behavior 优先于 引用者 behavior 执行；
  - 靠前的 behavior 优先于 靠后的 behavior 执行;
  4. 如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。