EveryLike/pages/API/create-selector-query/selector-query-child-multi.uvue

<template>
  <view class="selector-query-view">
    <text>selector-query</text>
    <text class="text red">{{text1}}</text>
  </view>
  <view class="selector-query-view">
    <text>selector-query</text>
    <text class="text green">{{text2}}</text>
  </view>
  <view v-if="text1.length>0">1</view>
  <text>{{text3}}</text>
</template>

<script>
  export default {
    data() {
      return {
        text1: "",
        text2: "",
        text3: "test-text-node",
        viewCount: 0,
        selectCount: 0,
        selectAllCount: 0,
        show: false,
        testCounter: 0
      }
    },
    mounted() {
      uni.createSelectorQuery().in(this).select('.selector-query-view').boundingClientRect().exec((ret) => {
        this.text1 = JSON.stringify(ret, null, 2)
        if (ret.length == 1) {
          this.selectCount = ret.length
        }
        this.testCounter++
        this._dispatchEvent()
      })
      uni.createSelectorQuery().in(this).selectAll('.selector-query-view').boundingClientRect().exec((ret) => {
        this.text2 = JSON.stringify(ret, null, 2)
        if (ret.length == 1) {
          this.selectAllCount = (ret[0] as NodeInfo[]).length
        }
        this.testCounter++
        this._dispatchEvent()
      })
    },
    methods: {
      _dispatchEvent() {
        if (this.testCounter == 2) {
          uni.$emit('childReady')
        }
      }
    }
  }
</script>

<style>
  .green {
    border: 3px solid green;
  }

  .red {
    border: 3px solid red;
  }

  .view {
    border: 3px dashed lime;
    padding: 10px;
  }

  .text {
    margin-top: 20px;
    padding: 5px;
  }
</style>