WeChat アプレットの動作によるリスト最適化の高度な実装

行動の紹介

ビヘイビアは、一部のプログラミング言語の「ミックスイン」や「トレイト」に似た、コンポーネント間のコード共有に使用される機能です。
各動作には、プロパティ、データ、ライフサイクル関数およびメソッドのセットを含めることができます。コンポーネントがそれを参照すると、そのプロパティ、データ、メソッドがコンポーネントにマージされ、ライフサイクル関数が対応するタイミングで呼び出されます。各コンポーネントは複数の動作を参照でき、動作は他の動作を参照することもできます。

パラメータの詳細な意味と使用法については、リンク:動作リファレンス ドキュメントを参照してください。

動作jsファイルの設定をリストします。

全体的なリスト リクエストのデフォルト パラメータと戻り値の処理は動作に集中し、他の関連する処理関数がスローされます。

関数名 使用
AfterGetList デフォルトのスプライシング リストの他のデータ値の処理を削除します
getListError 読み込みエラーのその他の処理
前にもっと見る 次のページがあるかどうか、読み込み中かどうか以外の判断
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()
    }
  }
})

行動のためのページページの使用

提示:这里设置的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();
 }
})

注意の組み合わせルールを使用した行動

  • 同じ名前のプロパティまたはメソッドがある場合:
    1. コンポーネント自体にこのプロパティまたはメソッドがある場合、コンポーネントのプロパティまたはメソッドは動作において同じ名前のプロパティまたはメソッドをオーバーライドします。コンポーネント自体にこのプロパティがない場合は、コンポーネントのプロパティまたはメソッドが動作においてオーバーライドされます。 2.
    コンポーネントの動作フィールドで定義された後の動作の属性またはメソッドは、同じ名前の以前の属性またはメソッドをオーバーライドします。
    3. 2. に基づいて、ネストされた参照がある場合動作、ルールは次のとおりです。 リファラー 動作は、参照される動作内の同じ名前のプロパティまたはメソッドをオーバーライドします。
  • 同じ名前のデータフィールドがある場合:
    1. 同じ名前のデータフィールドがすべてオブジェクトタイプの場合、オブジェクトはマージされます
    2. それ以外の場合、データは上書きされます 上書きルールは次のとおりです: リファラーの動作> 参照される動作、背後の動作 > 前面の動作。(優先度の高いものが優先度の低いものより優先され、最大のものが最も優先されます)
  • ライフサイクル関数とオブザーバーは相互にカバーするのではなく、対応するトリガー タイミングで 1 つずつ呼び出されます:
    1. 異なるライフサイクル関数の場合、コンポーネントのライフサイクル関数の実行順序に従います。
    2. 同じライフサイクル関数および同じフィールド オブザーバーは次のルールに従います:
    - 実行はコンポーネントより優先されます;
    - 参照された動作は参照元の動作より優先されます;
    - 前の動作は後の動作より優先されます;
    4. 同じ動作がコンポーネントによって複数回参照される場合、定義されたライフサイクル関数とオブザーバーは繰り返し実行されません。

おすすめ

転載: blog.csdn.net/qq_41194534/article/details/131071259