pco/app/uview-ui/components/u-index-list/u-index-list.vue

<template>
  <view class="u-index-list">
    <!-- #ifdef APP-NVUE -->
    <list
        :scrollTop="scrollTop"
        enable-back-to-top
        :offset-accuracy="1"
        :style="{
				maxHeight: $u.addUnit(scrollViewHeight)
			}"
        @scroll="scrollHandler"
        ref="uList"
    >
      <cell
          v-if="$slots.header"
          ref="header"
      >
        <slot name="header"/>
      </cell>
      <slot/>
      <cell v-if="$slots.header">
        <slot name="footer"/>
      </cell>
    </list>
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
    <scroll-view
        :scrollTop="scrollTop"
        :scrollIntoView="scrollIntoView"
        :offset-accuracy="1"
        :style="{
				maxHeight: $u.addUnit(scrollViewHeight)
			}"
        scroll-y
        @scroll="scrollHandler"
        ref="uList"
    >
      <view v-if="$slots.header">
        <slot name="header"/>
      </view>
      <slot/>
      <view v-if="$slots.header">
        <slot name="footer"/>
      </view>
    </scroll-view>
    <!-- #endif -->
    <view
        class="u-index-list__letter"
        ref="u-index-list__letter"
        :style="{ top: $u.addUnit(letterInfo.top || 100) }"
        @touchstart="touchStart"
        @touchmove.stop.prevent="touchMove"
        @touchend.stop.prevent="touchEnd"
        @touchcancel.stop.prevent="touchEnd"
    >
      <view
          class="u-index-list__letter__item"
          v-for="(item, index) in uIndexList"
          :key="index"
          :style="{
					backgroundColor: activeIndex === index ? activeColor : 'transparent'
				}"
      >
        <text
            class="u-index-list__letter__item__index"
            :style="{color: activeIndex === index ? '#fff' : inactiveColor}"
        >{{ item }}
        </text>
      </view>
    </view>
    <u-transition
        mode="fade"
        :show="touching"
        :customStyle="{
				position: 'fixed',
				right: '50px',
				top: $u.addUnit(indicatorTop),
				zIndex: 2
			}"
    >
      <view
          class="u-index-list__indicator"
          :class="['u-index-list__indicator--show']"
          :style="{
					height: $u.addUnit(indicatorHeight),
					width: $u.addUnit(indicatorHeight)
				}"
      >
        <text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
      </view>
    </u-transition>
  </view>
</template>

<script>
const indexList = () => {
  const indexList = [];
  const charCodeOfA = 'A'.charCodeAt(0);
  for (let i = 0; i < 26; i++) {
    indexList.push(String.fromCharCode(charCodeOfA + i));
  }
  return indexList;
}
import props from './props.js';
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
/**
 * IndexList 索引列表
 * @description  通过折叠面板收纳内容区域
 * @tutorial https://uviewui.com/components/indexList.html
 * @property {String}      inactiveColor  右边锚点非激活的颜色 ( 默认 '#606266' )
 * @property {String}      activeColor    右边锚点激活的颜色 ( 默认 '#5677fc' )
 * @property {Array}      indexList    索引字符列表，数组形式
 * @property {Boolean}      sticky      是否开启锚点自动吸顶 ( 默认 true )
 * @property {String | Number}  customNavHeight  自定义导航栏的高度 ( 默认 0 )
 * */
export default {
  name: 'u-index-list',
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  // #ifdef MP-WEIXIN
  // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
  options: {
    virtualHost: true
  },
  // #endif
  data() {
    return {
      // 当前正在被选中的字母索引
      activeIndex: -1,
      touchmoveIndex: 1,
      // 索引字母的信息
      letterInfo: {
        height: 0,
        itemHeight: 0,
        top: 0
      },
      // 设置字母指示器的高度，后面为了让指示器跟随字母，并将尖角部分指向字母的中部，需要依赖此值
      indicatorHeight: 50,
      // 字母放大指示器的top值，为了让其指向当前激活的字母
      // indicatorTop: 0
      // 当前是否正在被触摸状态
      touching: false,
      // 滚动条顶部top值
      scrollTop: 0,
      // scroll-view的高度
      scrollViewHeight: 0,
      // 系统信息
      sys: uni.$u.sys(),
      scrolling: false,
      scrollIntoView: '',
    }
  },
  computed: {
    // 如果有传入外部的indexList锚点数组则使用，否则使用内部生成A-Z字母
    uIndexList() {
      return this.indexList.length ? this.indexList : indexList()
    },
    // 字母放大指示器的top值，为了让其指向当前激活的字母
    indicatorTop() {
      const {
        top,
        itemHeight
      } = this.letterInfo
      return Math.floor(top + itemHeight * this.activeIndex + itemHeight / 2 - this.indicatorHeight / 2)
    }
  },
  watch: {
    // 监听字母索引的变化，重新设置尺寸
    uIndexList: {
      immediate: true,
      handler() {
        uni.$u.sleep().then(() => {
          this.setIndexListLetterInfo()
        })
      }
    }
  },
  created() {
    this.children = []
    this.anchors = []
    this.init()
  },
  mounted() {
    this.setIndexListLetterInfo()
  },
  methods: {
    init() {
      // 设置列表的高度为整个屏幕的高度
      //减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
      //解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
      this.scrollViewHeight = this.sys.windowHeight - this.customNavHeight
    },
    // 索引列表被触摸
    touchStart(e) {
      // 获取触摸点信息
      const touchStart = e.changedTouches[0]
      if (!touchStart) return
      this.touching = true
      const {
        pageY
      } = touchStart
      // 根据当前触摸点的坐标，获取当前触摸的为第几个字母
      const currentIndex = this.getIndexListLetter(pageY)
      this.setValueForTouch(currentIndex)
    },
    // 索引字母列表被触摸滑动中
    touchMove(e) {
      // 获取触摸点信息
      let touchMove = e.changedTouches[0]
      if (!touchMove) return;

      // 滑动结束后迅速开始第二次滑动时候 touching 为 false 造成不显示 indicator 问题
      if (!this.touching) {
        this.touching = true
      }
      const {
        pageY
      } = touchMove
      const currentIndex = this.getIndexListLetter(pageY)
      this.setValueForTouch(currentIndex)
    },
    // 触摸结束
    touchEnd(e) {
      // 延时一定时间后再隐藏指示器，为了让用户看的更直观，同时也是为了消除快速切换u-transition的show带来的影响
      uni.$u.sleep(300).then(() => {
        this.touching = false
      })
    },
    // 获取索引列表的尺寸以及单个字符的尺寸信息
    getIndexListLetterRect() {
      return new Promise(resolve => {
        // 延时一定时间，以获取dom尺寸
        // #ifndef APP-NVUE
        this.$uGetRect('.u-index-list__letter').then(size => {
          resolve(size)
        })
        // #endif

        // #ifdef APP-NVUE
        const ref = this.$refs['u-index-list__letter']
        dom.getComponentRect(ref, res => {
          resolve(res.size)
        })
        // #endif
      })
    },
    // 设置indexList索引的尺寸信息
    setIndexListLetterInfo() {
      this.getIndexListLetterRect().then(size => {
        const {
          height
        } = size
        const sys = uni.$u.sys()
        const windowHeight = sys.windowHeight
        let customNavHeight = 0
        // 消除各端导航栏非原生和原生导致的差异，让索引列表字母对屏幕垂直居中
        if (this.customNavHeight == 0) {
          // #ifdef H5
          customNavHeight = sys.windowTop
          // #endif
          // #ifndef H5
          // 在非H5中，为原生导航栏，其高度不算在windowHeight内，这里设置为负值，后面相加时变成减去其高度的一半
          customNavHeight = -(sys.statusBarHeight + 44)
          // #endif
        } else {
          customNavHeight = uni.$u.getPx(this.customNavHeight)
        }
        this.letterInfo = {
          height,
          // 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
          top: (windowHeight - height) / 2 + customNavHeight / 2,
          itemHeight: Math.floor(height / this.uIndexList.length)
        }
      })
    },
    // 获取当前被触摸的索引字母
    getIndexListLetter(pageY) {
      const {
        top,
        height,
        itemHeight
      } = this.letterInfo
      // 对H5的pageY进行修正，这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
      // #ifdef H5
      pageY += uni.$u.sys().windowTop
      // #endif
      // 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
      if (pageY < top) {
        return 0
      } else if (pageY >= top + height) {
        // 如果超出了，取最后一个字母
        return this.uIndexList.length - 1
      } else {
        // 将触摸点的Y轴偏移值，减去索引字母的top值，除以每个字母的高度，即可得到当前触摸点落在哪个字母上
        return Math.floor((pageY - top) / itemHeight);
      }
    },
    // 设置各项由触摸而导致变化的值
    setValueForTouch(currentIndex) {
      // 如果偏移量太小，前后得出的会是同一个索引字母，为了防抖，进行返回
      if (currentIndex === this.activeIndex) return
      this.activeIndex = currentIndex
      // #ifndef APP-NVUE || MP-WEIXIN
      // 在非nvue中，由于anchor和item都在u-index-item中，所以需要对index-item进行偏移
      this.scrollIntoView = `u-index-item-${this.uIndexList[currentIndex].charCodeAt(0)}`
      // #endif
      // #ifdef MP-WEIXIN
      // 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
      this.scrollTop = this.children[currentIndex].top
      // #endif
      // #ifdef APP-NVUE
      // 在nvue中，由于cell和header为同级元素，所以实际是需要对header(anchor)进行偏移
      const anchor = `u-index-anchor-${this.uIndexList[currentIndex]}`
      dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], {
        offset: 0,
        animated: false
      })
      // #endif
    },
    getHeaderRect() {
      // 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
      return new Promise(resolve => {
        dom.getComponentRect(this.$refs.header, res => {
          resolve(res.size)
        })
      })
    },
    // scroll-view的滚动事件
    async scrollHandler(e) {
      if (this.touching || this.scrolling) return
      // 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
      this.scrolling = true
      uni.$u.sleep(10).then(() => {
        this.scrolling = false
      })
      let scrollTop = 0
      const len = this.children.length
      let children = this.children
      const anchors = this.anchors
      // #ifdef APP-NVUE
      // nvue下获取的滚动条偏移为负数，需要转为正数
      scrollTop = Math.abs(e.contentOffset.y)
      // 获取header slot的尺寸信息
      const header = await this.getHeaderRect()
      // item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
      let top = header.height
      // 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
      children = this.children.map((item, index) => {
        const child = {
          height: item.height,
          top
        }
        // 进行累加，给下一个item提供计算依据
        top += item.height + anchors[index].height
        return child
      })
      // #endif
      // #ifndef APP-NVUE
      // 非nvue通过detail获取滚动条位移
      scrollTop = e.detail.scrollTop
      // #endif
      for (let i = 0; i < len; i++) {
        const item = children[i],
            nextItem = children[i + 1]
        // 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
        if (scrollTop <= children[0].top || scrollTop >= children[len - 1].top + children[len -
        1].height) {
          this.activeIndex = -1
          break
        } else if (!nextItem) {
          // 当不存在下一个item时，意味着历遍到了最后一个
          this.activeIndex = len - 1
          break
        } else if (scrollTop > item.top && scrollTop < nextItem.top) {
          this.activeIndex = i
          break
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-index-list {

  &__letter {
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 3;
    padding: 0 6px;

    &__item {
      width: 16px;
      height: 16px;
      border-radius: 100px;
      margin: 1px 0;
      @include flex;
      align-items: center;
      justify-content: center;

      &--active {
        background-color: $u-primary;
      }

      &__index {
        font-size: 12px;
        text-align: center;
        line-height: 12px;
      }
    }
  }

  &__indicator {
    width: 50px;
    height: 50px;
    border-radius: 100px 100px 0 100px;
    text-align: center;
    color: #ffffff;
    background-color: #c9c9c9;
    transform: rotate(-45deg);
    @include flex;
    justify-content: center;
    align-items: center;

    &__text {
      font-size: 28px;
      line-height: 28px;
      font-weight: bold;
      color: #fff;
      transform: rotate(45deg);
      text-align: center;
    }
  }
}
</style>