lachang-wxapp/ThorUI/components/tui-skeleton/tui-skeleton.js

Component({
  properties: {
    //选择器(外层容器)
    selector: {
      type: String,
      value: "tui-skeleton"
    },
    //外层容器背景颜色
    backgroundColor: {
      type: String,
      value: "#fff"
    },
    //骨架元素背景颜色
    skeletonBgColor: {
      type: String,
      value: "#e9e9e9"
    },
    //骨架元素类型：矩形，圆形，带圆角矩形["rect","circular","fillet"]
    //默认所有，根据页面情况进行传值
    //页面对应元素class为：tui-skeleton-rect，tui-skeleton-circular，tui-skeleton-fillet
    //如果传入的值不在下列数组中，则为自定义class值，默认按矩形渲染
    skeletonType: {
      type: Array,
      value: ["rect", "circular", "fillet"]
    },
    //圆角值，skeletonType=fillet时生效
    borderRadius: {
      type: String,
      value: "16rpx"
    },
    //骨架屏预生成数据：提前生成好的数据，当传入该属性值时，则不会再次查找子节点信息
    preloadData: {
      type: Array,
      value: []
    },
    //是否需要loading
    loading: {
      type: Boolean,
      value: true
    },
    //loading类型[1-10]
    loadingType: {
      type: Number,
      value: 1
    }
  },
  lifetimes: {
    attached: function() {
      const res = wx.getSystemInfoSync();
      this.setData({
        winWidth: res.windowWidth,
        winHeight: res.windowHeight
      })
      this.isPreload(true)
    },
    ready: function() {
      this.nodesRef(`.${this.data.selector}`).then((res) => {
        this.setData({
          winHeight: res[0].height + res[0].top
        })
      });
      !this.isPreload() && this.selectorQuery()
    }
  },
  data: {
    winWidth: 375,
    winHeight: 800,
    skeletonElements: []
  },
  methods: {
    isPreload(init) {
      let preloadData = this.data.preloadData || []
      if (preloadData.length) {
        if (init) {
          this.setData({
            skeletonElements: preloadData
          })
        }
        return true
      }
      return false
    },
    async selectorQuery() {
      let skeletonType = this.data.skeletonType || []
      let nodes = []
      for (let item of skeletonType) {
        let className = `.${this.data.selector} >>> .${item}`
        if (~"rect_circular_fillet".indexOf(item)) {
          className = `.${this.data.selector} >>> .${this.data.selector}-${item}`
        }
        await this.nodesRef(className).then((res) => {
          res.map(d => {
            d.skeletonType = item
          })
          nodes = nodes.concat(res)
        })
      }
      this.setData({
        skeletonElements: nodes
      })
    },
    async nodesRef(className) {
      return await new Promise((resolve, reject) => {
        wx.createSelectorQuery().selectAll(className).boundingClientRect((res) => {
          if (res) {
            resolve(res);
          } else {
            reject(res)
          }
        }).exec();
      })
    }
  }
})