dykj-football/uni_modules/uview-plus/components/u-index-list/u-index-list.vue
2024-04-17 15:27:43 +08:00

447 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="u-index-list">
<!-- #ifdef APP-NVUE -->
<list
:scrollTop="scrollTop"
enable-back-to-top
:offset-accuracy="1"
:style="{
maxHeight: addUnit(scrollViewHeight)
}"
@scroll="scrollHandler"
ref="uList"
>
<cell
v-if="$slots.header"
ref="header"
>
<slot name="header" />
</cell>
<slot />
<cell v-if="$slots.footer">
<slot name="footer" />
</cell>
</list>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<scroll-view
:scrollTop="scrollTop"
:scrollIntoView="scrollIntoView"
:offset-accuracy="1"
:style="{
maxHeight: addUnit(scrollViewHeight)
}"
scroll-y
@scroll="scrollHandler"
ref="uList"
>
<view v-if="$slots.header">
<slot name="header" />
</view>
<slot />
<view v-if="$slots.footer">
<slot name="footer" />
</view>
</scroll-view>
<!-- #endif -->
<view
class="u-index-list__letter"
ref="u-index-list__letter"
:style="{ top: addUnit(letterInfo.top || 100) }"
@touchstart.prevent="touchStart"
@touchmove.prevent="touchMove"
@touchend.prevent="touchEnd"
@touchcancel.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: addUnit(indicatorTop),
zIndex: 2
}"
>
<view
class="u-index-list__indicator"
:class="['u-index-list__indicator--show']"
:style="{
height: addUnit(indicatorHeight),
width: 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';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addUnit, sys, sleep, getPx } from '../../libs/function/index';
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物所以不支持百分比单位这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* IndexList 索引列表
* @description 通过折叠面板收纳内容区域
* @tutorial https://uview-plus.jiangruyi.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: [mpMixin, 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: 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() {
sleep().then(() => {
this.setIndexListLetterInfo()
})
}
}
},
created() {
this.children = []
this.anchors = []
this.init()
},
mounted() {
this.setIndexListLetterInfo()
},
methods: {
addUnit,
init() {
// 设置列表的高度为整个屏幕的高度
//减去this.customNavHeight并将this.scrollViewHeight设置为maxHeight
//解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时还能滚动
let customNavHeight = getPx(this.customNavHeight)
this.scrollViewHeight = this.sys.windowHeight - 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带来的影响
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 = 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 = 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 += 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的形式去移动滚动条
const customNavHeight = this.customNavHeight
this.scrollTop = this.children[currentIndex].top - getPx(customNavHeight)
// #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
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>