<view class="{{classPrefix}} t-class">
  <scroll-view
    class="{{classPrefix}}__content"
    scroll-y
    scroll-into-view="index_{{ currentGroup.index }}"
    scroll-with-animation="{{ false }}"
    style="height: {{ height ? height + 'px' : clientHeight + 'px' }};"
    bindscroll="onListScroll"
  >
    <t-cell-group
      t-class="{{classPrefix}}__group"
      class="{{classPrefix}}__group"
      wx:for="{{ groups }}"
      wx:key="index"
      wx:for-item="group"
      wx:for-index="gindex"
      id="index_{{ group.index }}"
      title="{{ group.title }}"
    >
      <t-cell
        t-class="{{classPrefix}}__row"
        wx:for="{{ group.children }}"
        wx:key="title"
        wx:for-item="row"
        wx:for-index="rindex"
        bind:tap="onCellTap"
        data-indexes="{{ [gindex, rindex] }}"
        title="{{ row.title }}"
      ></t-cell>
    </t-cell-group>
  </scroll-view>
  <view class="{{classPrefix}}__index t-class-index">
    <view
      class="{{classPrefix}}__bar"
      id="id-{{classPrefix}}__bar"
      catch:touchstart="onTouchStart"
      catch:touchmove="onTouchMove"
      catch:touchcancel="onTouchCancel"
      catch:touchend="onTouchEnd"
    >
      <view
        class="{{classPrefix}}__btn {{activeGroup.index === group.index ? 'is-actived' : ''}}"
        wx:for="{{ groups }}"
        wx:key="index"
        wx:for-item="group"
        data-group="{{ group }}"
      >
        {{ group.index }}
        <view
          class="{{classPrefix}}__tips"
          wx:if="{{ showScrollTip && currentGroup.index === group.index }}"
        >
          <view class="{{classPrefix}}__tips-text">{{ currentGroup.index }}</view>
        </view>
      </view>
    </view>
  </view>
</view>
