uniIM/components/IndexBar.vue

<template>
  <view>
    <scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID"
                 :style="[{height:height}]" :scroll-with-animation="true"
                 :enable-back-to-top="true" v-if="indexMap">
      <slot></slot>
    </scroll-view>
    <view class="indexBar" :style="[{height:height}]">
      <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
        <view class="indexBar-item" v-for="(item) in indexMap.keys()" :key="item" :id="item"
              @touchstart="getCur" @touchend="setCur"> {{ item }}
        </view>
      </view>
    </view>
    <!--选择显示-->
    <view v-show="!hidden" class="indexToast">
      {{ listCur }}
    </view>
  </view>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, ref} from "vue";
import {useGroupStore} from "@/store/groupStore";
import type ChatSimple from "@/mode/ChatSimple";

const groupStore = useGroupStore();
const {proxy} = getCurrentInstance();
const customBar = ref(proxy.customBar);
const hidden = ref(true);
const listCurID = ref('');
const listCur = ref('');
const height = computed(() => {
  return 'calc(100vh - ' + customBar.value + 'px ' + (props.bottom ? '- 50px' : '') + ')';
})

const props = defineProps(
    {
      //索引map
      indexMap: {
        type: Map,
        default: new Map<string, ChatSimple>()
      },
      //是否展示底部高度
      bottom: {
        type: Boolean,
        default: false
      },
	  //是否展示底部高度
	  bottomHeight: {
	    type:Number,
	    default: 0
	  }
    }
)


//获取文字信息
const getCur = (e: any) => {
  hidden.value = false;
  listCur.value = e.target.id;
}

const setCur = () => {
  hidden.value = true;
}

//滑动选择Item
const tMove = (e: TouchEvent) => {
  let y = e.touches[0].clientY,
      offsettop = customBar.value;
  //判断选择区域,只有在选择区才会生效
  if (y > offsettop) {
    let num = (y - offsettop) / 20;
    listCur.value = props.indexMap.get(num)?.name
  }
}

//触发全部开始选择
const tStart = () => {
  hidden.value = false
}

//触发结束选择
const tEnd = () => {
  hidden.value = true;
  listCurID.value = listCur.value
}

const showGroup = (id: string) => {
  uni.navigateTo({
    url: '/pages/group/group?id=' + id
  })
}


</script>

<style>
.indexes {
  position: relative;
}

.indexBar {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 20upx 20upx 20upx 60upx;
  display: flex;
  align-items: center;
}

.indexBar .indexBar-box {
  width: 40upx;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
  border-radius: 10upx;
}

.indexBar-item {
  flex: 1;
  width: 40upx;
  height: 40upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24upx;
  color: #888;
}

.indexBar-item {
  width: 40upx;
  height: 40upx;
  z-index: 9;
  position: relative;
}

.indexBar-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  height: 20upx;
  width: 4upx;
  background-color: #f37b1d;
}

.indexToast {
  position: fixed;
  top: 0;
  right: 80upx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100upx;
  height: 100upx;
  border-radius: 10upx;
  margin: auto;
  color: #fff;
  line-height: 100upx;
  text-align: center;
  font-size: 48upx;
}
</style>