wx-mini-weview/components/tabpanel-content/tabpanel-content.js

weixin UI

const { WvInheritable } = require('../../behaviors/WvInheritable');
const { WvComponentEvent } = require('../../behaviors/WvComponentEvent');

Component({
  options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true
  },

  relations: {
    '../tabpanel/tabpanel': {
      type: 'parent',
      linked(target) {
        this.linkParentNode('tabpanel', target);
      },
      unlinked() {
        this.unlinkParentNode('tabpanel');
      }
    },
    '../vtabpanel/vtabpanel': {
      type: 'parent',
      linked(target) {
        this.linkParentNode('vtabpanel', target);
      },
      unlinked() {
        this.unlinkParentNode('vtabpanel');
      }
    }
  },

  behaviors: [
    WvInheritable({
    }), 
		WvComponentEvent
  ],

  properties: {
    properties: {
      name: {
        type: String,
        value: ''
      },
      
      customClass: {
        type: String,
        value: ''
      }
    }
  },

  data: {
    active: false,
    index: -1,
    style: '',
    scrollId: '',
    _intersectionObserver: null,
    _prevIntersectionRatio: 0
  },

  lifetimes: {
    attached() {
      if (!this.data.name) {
        const randomName = 'tabpanel_content_' + Math.floor(Math.random() * 10000);
        this.setData({
          name: randomName
        });
      }
      
      // 初始化出现状态
      this._appeared = false;
    },

    ready() {
    },
    
    detached() {
    }
  },

  methods: {    
    // 更新激活状态
    setActive(active, index) {
      if (this.data.active !== active || this.data.index !== index) {
        this.setData({
          active,
          index
        });
      }
    },

    // 更新位置样式
    updateStyle(style) {
      this.setData({ style });
    },

    /**
     * 更新可见性状态并触发相应事件
     * @param {Boolean} isVisible 是否可见
     */
    updateVisibility(isVisible) {      
      if (isVisible && !this._appeared) {console.log(`appear-${this.data.index}-${this.data.name}`)
        this._appeared = true;
        this.triggerEvent('appear', {
          index: this.data.index,
          name: this.data.name
        });
      } else if (!isVisible && this._appeared) {console.log(`disappear-${this.data.index}-${this.data.name}`)
        this._appeared = false;
        this.triggerEvent('disappear', {
          index: this.data.index,
          name: this.data.name
        });
      }
    }
  }
});