小程序-自定义组件 ID属性笔记

在自定义组件的时候，组件内包含了其他自定义组件：
如课程列表组件，被状态组件包含（关于状态组件主要是指：加载中，没有数据，错误等状态页面）
如：

image.png image.png image.png

对应WXML如下：

<!--components/couser-list-content/couser-list-content.wxml-->

    <view class="index-content" style="display: {{sortId===currentTabId?'block':'none'}}">
      <scroll-view scrollY="false" bindscroll="onScroll" bindscrolltolower="onScrollToLower" class="scroll-container" scrollTop="{{scrollTop}}" upper-threshold="250" lower-threshold="250">

        <!-- <view wx:for="{{courseList}}" wx:key="{{index}}">
          <view>
            我是列表的内容界面{{currentTabId}}+{{index}}
          </view>
        </view> -->

      <load-status-layout id="statusLayout{{currentTabId}}" status='ERROR' rootStyle="height:{{system.windowHeight-50}}px;" errorText="加载失败, 请点击重试" data-indexid="{{currentTabId}}" bindOnClickListener='testStatusLayout'>
      
        <block>

          <!-- 加载课程 -->
          <import src="../../pages/template/courser-item/courser-item.wxml"></import>
          <template is="courser-item" data="{{kecheng_sticksList}}"></template>



          <!-- 加载更多视图 -->
          <import src="../../components/loading/loading.wxml"></import>
          <!-- is是指向模板的名称 -->
          <template is="loading" data="{{isMoreClass:is_show_loading}}"></template>

        </block>
      </load-status-layout>

      </scroll-view>
      <view bindtap="backTop" class="backtop">
        <text class="backtop-icon iconfont icon-top"></text>
      </view>
    </view>

在进行列表分页渲染的时候，因为我没有对load-status-layout id="statusLayout{{currentTabId}}" 走ID命名区分导致了，所有的分页的页面所有组件都是共用一个ID的，导致了点击了的时候出现了有些页面无法点击情况。

所有正常是需要给不同的分页下的对应的状态也，命名的不同的组件名称

对应的点击时间的处理的时候才不会出现错乱的现象：

  testStatusLayout: function (event) {
      if (this.data.isloading) return;
      console.log('点击触发了', event)
      statusLayout = this.selectComponent("#statusLayout" + event.currentTarget.dataset.indexid)
      console.log('点击触发了statusLayout', statusLayout)
      statusLayout.showLoading()
      statusLayout.setStatus("LOADING")
      setTimeout(function () {
        var num = Math.floor(Math.random() * 10 + 1); //1-10

        if (num <= 3) {
          statusLayout.showContent()
          // statusLayout.setStatus("CONTENT")
        } else if (num <= 7) {
          statusLayout.showError()
          // statusLayout.setStatus("ERROR")
        } else {
          statusLayout.showEmpty()
          // statusLayout.setStatus("EMPTY")
        }
      }, 1000)
    },

PS：关键的地方是statusLayout = this.selectComponent("#statusLayout" + event.currentTarget.dataset.indexid)