This commit is contained in:
魏啾
2024-04-03 09:15:17 +08:00
parent 653da2ad81
commit 2b723694fa
10 changed files with 16695 additions and 628 deletions

View File

@@ -1,20 +1,10 @@
<template>
<view class="u-index-list">
<!-- #ifdef APP-NVUE -->
<list
:scrollTop="scrollTop"
enable-back-to-top
:offset-accuracy="1"
:style="{
<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"
>
}" @scroll="scrollHandler" ref="uList">
<cell v-if="$slots.header" ref="header">
<slot name="header" />
</cell>
<slot />
@@ -24,17 +14,9 @@
</list>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<scroll-view
:scrollTop="scrollTop"
:scrollIntoView="scrollIntoView"
:offset-accuracy="1"
:style="{
<scroll-view :scrollTop="scrollTop" :scrollIntoView="scrollIntoView" :offset-accuracy="1" :style="{
maxHeight: $u.addUnit(scrollViewHeight)
}"
scroll-y
@scroll="scrollHandler"
ref="uList"
>
}" scroll-y @scroll="scrollHandler" ref="uList">
<view v-if="$slots.header">
<slot name="header" />
</view>
@@ -44,47 +26,26 @@
</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="{
<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>
}">
<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="{
<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="{
}">
<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>
@@ -114,7 +75,7 @@
* @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],
@@ -189,7 +150,8 @@
// 设置列表的高度为整个屏幕的高度
//减去this.customNavHeight并将this.scrollViewHeight设置为maxHeight
//解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时还能滚动
this.scrollViewHeight = this.sys.windowHeight - this.customNavHeight
this.scrollViewHeight = (this.sys.windowHeight - this.customNavHeight) * 2
// console.log(uni.$u.addUnit(this.scrollViewHeight), this.sys.windowHeight, this.customNavHeight)
},
// 索引列表被触摸
touchStart(e) {
@@ -368,7 +330,7 @@
1].height) {
this.activeIndex = -1
break
} else if (!nextItem) {
} else if (!nextItem) {
// 当不存在下一个item时意味着历遍到了最后一个
this.activeIndex = len - 1
break
@@ -437,4 +399,4 @@
}
}
}
</style>
</style>