组件构成

组件是前端的基础构成,前端的大量工作都在不停的构建不同的组件

基础构成代码

  const app = getApp()
  const Pager = require('../core')
  const lib = Pager.lib
  const resetItem = lib.resetItem

  Component({
    options: {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      addGlobalClass: true  // 使用全局样式
    },
    behaviors: [Pager.baseBehavior(app)],
    lifetimes: {
      attached: function attached() { //节点树完成,可以用setData渲染节点,但无法操作节点

      }
    },
  });

Behaviors

依据小程序的Behaviors规则,我们可以通过指定不同的Behaviors来构成组件,本环境中你可以依照小程序原生方式撰写组件。

commonBehavior

最基础的Behavior方法,

  // 基础入口变量
  properties: {
    id: String
    fromComponent: {  // 该组件被其他组件引用
      type: String,
      value: ''  // uniqId
    }
  }

  // 基础data数据
  this.data.uniqId  // 组件唯一id的内部变量

  // 实例属性
  this.uniqId   // 组件唯一id
  this.hooks    // 该组件的钩子方法集
  this.mounted  // 是否渲染完成
  this.activePage  // 当前激活的page页实例

  // 实例方法
  this.getData
  this.mount  // 将this挂载到getElementsById
  this.show
  this.hide
  this.toggle

commonMethodBehavior

基础事件解析方法
所有item、list、tree的组件及衍生组件的tap, longpress, touch方法及其参数都会经过解析并传递给父级组件或者Pager中定义的方法

  this.itemMethod   // 解析冒泡方法
  this.catchItemMethod  // 解析阻止冒泡的方法

baseBehavior

融合了commonBehavior和commonMethodBehavior的混合继承behaviors

itemComponentBehavior

item的基础继承方法, 该方法继承自baseBehavior

  // 入口变量
  properties: {
    item: Object
  }

  // 实例方法
  this.attr  // 获得数据项的attr配置参数
  this.reset  // 恢复初始数据
  this.update  // this.setData的封装,简化了更新参数

itemComponentBehavior

item的基础继承方法, 该方法继承自baseBehavior

  // 入口变量
  properties: {
    list: Object
  }

  // 实例方法
  this.attr  // 获得数据项的attr配置参数
  this.reset  // 恢复初始数据
  this.update  // this.setData的封装,简化了更新参数
  this.findIndex   // 查找匹配数据的下标
  this.find     // 查找匹配数据
  this.findAndUpdate  // 查找并更新匹配数据
  this.append   // 追加数据
  this.prepend  // 前置追加数据
  this.delete   // 删除指定数据项
  this.insert   // 插入数据项
  this._scrollMethod    // 解析滚动方法
  this._swiperMethod    // 解析swiper方法