feat: 首次提交
This commit is contained in:
peerless_hero
256
components/firstui/fui-index-list/f-index-list-item.vue
Normal file
256
components/firstui/fui-index-list/f-index-list-item.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 4 0725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-index__list-item" :class="{'fui-il__between':subRight}" @tap="onClick">
|
||||
<view class="fui-index__list-left">
|
||||
<view class="fui-il__checkbox"
|
||||
:class="{'fui-il__checkbox-color':(!selectedColor || selectedColor === true) && model.checked}"
|
||||
:style="{background:model.checked?getSelectedColor:'#fff',borderColor:model.checked?getSelectedColor:borderColor}"
|
||||
v-if="isSelect">
|
||||
<view class="fui-il__checkmark" v-if="model.checked"></view>
|
||||
</view>
|
||||
<view class="fui-il__img-box" v-if="isSrc">
|
||||
<image v-if="model.src" :src="model.src" class="fui-index__list-img" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="fui-index__list-main">{{model.text || ''}}</text>
|
||||
</view>
|
||||
<text class="fui-index__list-sub">{{model.subText || ''}}</text>
|
||||
<view class="fui-il__border-bottom" v-if="!last"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//此组件为索引列表item项，若不满足要求可自行调整样式
|
||||
export default {
|
||||
name: 'f-index-list-item',
|
||||
props: {
|
||||
model: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
||||
},
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//checkbox未选中时边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#ccc'
|
||||
},
|
||||
//是否显示图片
|
||||
isSrc: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//次要内容是否居右侧
|
||||
subRight: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
last: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
idx: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getSelectedColor() {
|
||||
let color = this.selectedColor;
|
||||
// #ifdef APP-NVUE
|
||||
if (!color || color === true) {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
color = (app && app.primary) || '#465CFF';
|
||||
}
|
||||
// #endif
|
||||
|
||||
return color;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit("itemClick", {
|
||||
idx: this.idx,
|
||||
index: this.index
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-index__list-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 32rpx 64rpx 32rpx 32rpx;
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-il__border-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 0.5px;
|
||||
z-index: -1;
|
||||
background-color: #EEEEEE;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 100%;
|
||||
z-index: 1;
|
||||
background-color: var(--fui-color-border, #EEEEEE);
|
||||
/* #endif */
|
||||
left: 32rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fui-index__list-item:active {
|
||||
/* #ifdef APP-NVUE */
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-il__between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fui-index__list-left {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-il__checkbox {
|
||||
font-size: 0;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-radius: 40rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-il__checkbox-color {
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
border-color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-il__checkmark {
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-color: #FFFFFF;
|
||||
border-right-style: solid;
|
||||
border-right-width: 3px;
|
||||
border-right-color: #FFFFFF;
|
||||
transform: rotate(45deg) scale(0.5);
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
transform: rotate(45deg) scale(0.5) translateZ(0);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(45deg) scale(0.5);
|
||||
/* #endif */
|
||||
transform-origin: 54% 48%;
|
||||
}
|
||||
|
||||
.fui-il__img-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
background-color: var(--fui-bg-color-content, #F8F8F8);
|
||||
/* #endif */
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
/* #ifdef APP-NVUE */
|
||||
background-color: #F8F8F8;
|
||||
/* #endif */
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.fui-index__list-img {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fui-index__list-main {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fui-index__list-sub {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
</style>
|
||||
649
components/firstui/fui-index-list/fui-index-list.vue
Normal file
649
components/firstui/fui-index-list/fui-index-list.vue
Normal file
@ -0,0 +1,649 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61 40 7 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-index__list" ref="fui_index_list" id="fui_index_list">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="fui-index__list-sv" scrollable="true" show-scrollbar="false">
|
||||
<cell>
|
||||
<slot></slot>
|
||||
</cell>
|
||||
|
||||
<!-- #ifdef VUE2 -->
|
||||
<template v-for="(list, idx) in lists">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<template v-for="(list, idx) in lists" :key="list.key">
|
||||
<!-- #endif -->
|
||||
<header :ref="'fui_il_letter_' + idx">
|
||||
<view class="fui-index__list-letter" :class="{'fui-il__key-bg':!background}"
|
||||
:style="{background:background}">
|
||||
<text class="fui-il__letter-text"
|
||||
:style="{color:color}">{{list.descr || list.letter}}</text>
|
||||
</view>
|
||||
</header>
|
||||
<!-- #ifdef VUE2 -->
|
||||
<cell :key="list.key">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<cell>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<scroll-view class="fui-index__list-sv" scroll-y :scroll-into-view="scrollViewId">
|
||||
<slot></slot>
|
||||
<view :id="'fui_il_letter_'+idx" v-for="(list, idx) in lists" :key="list.key">
|
||||
<view class="fui-index__list-letter" :class="{'fui-il__key-bg':!background}"
|
||||
:style="{background:background}">
|
||||
<text class="fui-il__letter-text"
|
||||
:style="{color:color}">{{list.descr || list.letter}}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- 解构插槽 item项样式内容自定义 -->
|
||||
<view v-if="custom">
|
||||
<view v-for="(model,index) in list.data" :key="index" @tap="onTap(idx,index)">
|
||||
<slot name="item" :model="model" :idx="idx" :index="index"
|
||||
:last="list.data.length-1===index" :isSelect="isSelect" :isSrc="isSrc"
|
||||
:subRight="subRight"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<f-index-list-item @itemClick="onClick" :model="model" :idx="idx" :index="index"
|
||||
:last="list.data.length-1===index" :isSelect="isSelect"
|
||||
:borderColor="borderColor" :selectedColor="selectedColor" :isSrc="isSrc"
|
||||
:subRight="subRight" v-for="(model,index) in list.data" :key="index">
|
||||
</f-index-list-item>
|
||||
</view>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
</view>
|
||||
<slot name="footer"></slot>
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
</cell>
|
||||
</template>
|
||||
<cell>
|
||||
<slot name="footer"></slot>
|
||||
</cell>
|
||||
</list>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef VUE3 -->
|
||||
<view class="fui-il__indicator" :class="{'fui-il__nvue-android':nvueAndroid}"
|
||||
:style="{ top: indicators[touchmoveIndex] + 'px' }" v-if="touching && touchmoveIndex!==-1">
|
||||
<view class="fui-il__indicator-after"></view>
|
||||
<text class="fui-il__indicator-text">{{ lists[touchmoveIndex] && lists[touchmoveIndex].letter }}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef VUE3 -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="fui-il__indicator" :class="{'fui-il__nvue-android':nvueAndroid}"
|
||||
:style="{ top: indicators[touchmoveIndex] + 'px' }" v-if="touching && touchmoveIndex!==-1">
|
||||
<view class="fui-il__indicator-after"></view>
|
||||
<text class="fui-il__indicator-text">{{ lists[touchmoveIndex] && lists[touchmoveIndex].letter }}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="fui-il__indicator" :class="{'fui-il__nvue-android':nvueAndroid}"
|
||||
:style="{ top: idtHeight/2 + 'px' }" v-if="touching && touchmoveIndex!==-1">
|
||||
<view class="fui-il__indicator-after"></view>
|
||||
<text class="fui-il__indicator-text">{{ lists[touchmoveIndex] && lists[touchmoveIndex].letter }}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="fui-index__letter" :style="styles" @touchstart="touchStart" @touchmove.stop.prevent="touchMove"
|
||||
@touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
|
||||
@mouseleave.stop="mouseleave" v-if="!isNvue || styles">
|
||||
<view class="fui-letter__item" v-for="(item, i) in lists" :key="i">
|
||||
<!-- @tap="letterTap(i)" -->
|
||||
<text class="fui-letter__key" :class="{'fui-il__key-color':i === touchmoveIndex && !activeBackground}"
|
||||
:style="{ background: i === touchmoveIndex ? getActiveBgColor : 'transparent', color: i === touchmoveIndex? activeColor : keyColor }">{{ item.letter }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom');
|
||||
// #endif
|
||||
import fIndexListItem from './f-index-list-item.vue'
|
||||
// #ifdef APP-PLUS
|
||||
function throttle(func, delay) {
|
||||
var prev = Date.now();
|
||||
return function() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
var now = Date.now();
|
||||
if (now - prev >= delay) {
|
||||
func.apply(context, args);
|
||||
prev = Date.now();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
let pageY = e.touches[0].pageY
|
||||
let index = this.getIndex(pageY - this.winOffsetY)
|
||||
if (this.touchmoveIndex === index) {
|
||||
return false
|
||||
}
|
||||
let item = this.lists[index]
|
||||
if (item) {
|
||||
// #ifndef APP-NVUE
|
||||
this.scrollViewId = `fui_il_letter_${index}`
|
||||
this.touchmoveIndex = index
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.scrollToElement(this.$refs[`fui_il_letter_${index}`][0], {
|
||||
animated: false
|
||||
})
|
||||
this.touchmoveIndex = index
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
const throttleTouchMove = throttle(touchMove, 40)
|
||||
// #endif
|
||||
export default {
|
||||
name: 'fui-index-list',
|
||||
emits: ['click', 'init'],
|
||||
components: {
|
||||
fIndexListItem
|
||||
},
|
||||
props: {
|
||||
//列表数据
|
||||
listData: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 64
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
background: {
|
||||
type: String,
|
||||
default: '#F1F4FA'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
keyColor: {
|
||||
type: String,
|
||||
default: '#7F7F7F'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
activeBackground: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//checkbox未选中时边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#ccc'
|
||||
},
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//是否显示图片
|
||||
isSrc: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//次要内容是否居右侧
|
||||
subRight: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
custom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//H5端使用，是否使用了默认导航栏，默认44px
|
||||
isHeader: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
listData(val) {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getActiveBgColor() {
|
||||
let color = this.activeBackground;
|
||||
// #ifdef APP-NVUE
|
||||
if (!color || color === true) {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
color = (app && app.primary) || '#465CFF';
|
||||
}
|
||||
// #endif
|
||||
|
||||
return color;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false;
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true;
|
||||
// #endif
|
||||
return {
|
||||
lists: [],
|
||||
idtHeight: 0,
|
||||
winOffsetY: 0,
|
||||
winHeight: 0,
|
||||
styles: '',
|
||||
indicators: [],
|
||||
top: -1,
|
||||
start: 0,
|
||||
touching: false,
|
||||
touchmoveIndex: -1,
|
||||
scrollViewId: '',
|
||||
touchmovable: true,
|
||||
loaded: false,
|
||||
isPC: false,
|
||||
nvueAndroid: false,
|
||||
isNvue: isNvue
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef APP-NVUE
|
||||
const res = uni.getSystemInfoSync();
|
||||
if (res.platform.toLocaleLowerCase() == 'android') {
|
||||
this.nvueAndroid = true;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
this.isPC = this.IsPC()
|
||||
// #endif
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.initData()
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getIndex(y) {
|
||||
let index = -1;
|
||||
// #ifdef H5
|
||||
if (this.isHeader) {
|
||||
y += 44
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
if (this.nvueAndroid) {
|
||||
index = Math.floor(y / uni.upx2px(40))
|
||||
} else {
|
||||
index = Math.floor((y - this.start) / uni.upx2px(40))
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
// if (y > this.start && y < this.start + uni.upx2px(this.idtHeight)) {}
|
||||
index = Math.floor((y - this.start) / uni.upx2px(40))
|
||||
// #endif
|
||||
return index
|
||||
},
|
||||
initData() {
|
||||
this.lists = []
|
||||
let height = 0;
|
||||
let lists = [];
|
||||
let tempArr = [...(this.listData || [])]
|
||||
for (let i = 0, len = tempArr.length; i < len; i++) {
|
||||
let model = tempArr[i]
|
||||
if (!model.data || model.data.length === 0) {
|
||||
continue;
|
||||
}
|
||||
height += 40;
|
||||
model.originalIndex = i;
|
||||
model.key = `fui_key_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
lists.push(model)
|
||||
}
|
||||
this.idtHeight = height;
|
||||
this.styles = `height:${height}rpx;`;
|
||||
//nvue vue3 rpx 失效
|
||||
// #ifdef APP-NVUE
|
||||
// #ifdef VUE3
|
||||
this.idtHeight = uni.upx2px(height)
|
||||
this.styles = `height:${this.idtHeight}px;`;
|
||||
// #endif
|
||||
// #endif
|
||||
this.lists = lists;
|
||||
// #ifndef APP-NVUE
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select('#fui_index_list')
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
this.winOffsetY = ret[0].top
|
||||
this.winHeight = ret[0].height
|
||||
this.setStyles()
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['fui_index_list'], (res) => {
|
||||
this.winOffsetY = res.size.top
|
||||
this.winHeight = res.size.height
|
||||
this.setStyles()
|
||||
})
|
||||
// #endif
|
||||
this.$nextTick(() => {
|
||||
this.$emit('init')
|
||||
})
|
||||
},
|
||||
setStyles() {
|
||||
this.indicators = []
|
||||
|
||||
this.styles =
|
||||
`height:${this.idtHeight}rpx;top:${this.winHeight / 2}px;-webkit-transform: translateY(-${this.idtHeight/2}rpx);transform: translateY(-${this.idtHeight/2}rpx)`
|
||||
// #ifdef APP-NVUE
|
||||
// #ifdef VUE3
|
||||
this.styles =
|
||||
`height:${this.idtHeight}px;top:${this.winHeight / 2}px;-webkit-transform: translateY(-${this.idtHeight/2}px);transform: translateY(-${this.idtHeight/2}px)`
|
||||
// #endif
|
||||
// #endif
|
||||
let start = this.winHeight / 2 - uni.upx2px(this.idtHeight) / 2
|
||||
this.start = start;
|
||||
this.lists.forEach((item, index) => {
|
||||
//20为40的一半，50为100的一半
|
||||
const top = start + uni.upx2px(index * 40 + 20 - 50)
|
||||
this.indicators.push(top)
|
||||
})
|
||||
},
|
||||
startEmits(idx, index) {
|
||||
let item = this.lists[idx]
|
||||
let data = item.data[index] || {}
|
||||
this.$emit('click', {
|
||||
index: item.originalIndex,
|
||||
letter: item.letter,
|
||||
subIndex: index,
|
||||
...data
|
||||
})
|
||||
},
|
||||
onTap(idx, index) {
|
||||
this.startEmits(idx, index)
|
||||
},
|
||||
// #ifdef H5
|
||||
IsPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (let v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
// #endif
|
||||
onClick(e) {
|
||||
const {
|
||||
idx,
|
||||
index
|
||||
} = e;
|
||||
this.startEmits(idx, index)
|
||||
},
|
||||
touchStart(e) {
|
||||
this.touching = true
|
||||
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
|
||||
let index = this.getIndex(pageY - this.winOffsetY)
|
||||
let item = this.lists[index]
|
||||
if (item) {
|
||||
this.scrollViewId = `fui_il_letter_${index}`
|
||||
this.touchmoveIndex = index
|
||||
// #ifdef APP-NVUE
|
||||
dom.scrollToElement(this.$refs[`fui_il_letter_${index}`][0], {
|
||||
animated: false
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
touchMove(e) {
|
||||
// #ifndef APP-PLUS
|
||||
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
|
||||
let index = this.getIndex(pageY - this.winOffsetY)
|
||||
if (this.touchmoveIndex === index) return false;
|
||||
let item = this.lists[index]
|
||||
if (item) {
|
||||
this.scrollViewId = `fui_il_letter_${index}`
|
||||
this.touchmoveIndex = index
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
throttleTouchMove.call(this, e)
|
||||
// #endif
|
||||
},
|
||||
touchEnd() {
|
||||
this.touching = false
|
||||
this.touchmoveIndex = -1
|
||||
},
|
||||
mousedown(e) {
|
||||
if (!this.isPC) return
|
||||
this.touchStart(e)
|
||||
},
|
||||
mousemove(e) {
|
||||
if (!this.isPC) return
|
||||
this.touchMove(e)
|
||||
},
|
||||
mouseleave(e) {
|
||||
if (!this.isPC) return
|
||||
this.touchEnd(e)
|
||||
}
|
||||
//开发工具中移动端如果touch事件失效，请检查开发工具或者真机调试
|
||||
// letterTap(index) {
|
||||
// #ifdef H5
|
||||
// if (this.touching) return;
|
||||
// let item = this.lists[index]
|
||||
// if (item) {
|
||||
// this.scrollViewId = `fui_il_letter_${index}`
|
||||
// this.touchmoveIndex = index
|
||||
// }
|
||||
// this.touchEnd()
|
||||
// #endif
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-index__list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fui-index__list-sv {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fui-index__list-letter {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
padding: 0 32rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.5px;
|
||||
border-top-color: #eee;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.5px;
|
||||
border-bottom-color: #eee;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-il__letter-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-index__list-letter::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid var(--fui-color-border, #EEEEEE);
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fui-index__list-letter::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-index__letter {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
/* #ifndef APP-NVUE */
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-letter__item {
|
||||
flex: 1;
|
||||
padding: 0 8rpx;
|
||||
font-weight: bold;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-letter__key {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
transform: scale(0.8);
|
||||
transform-origin: center center;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-radius: 40rpx;
|
||||
line-height: 40rpx;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-il__indicator {
|
||||
position: fixed;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
z-index: 999;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
right: 100rpx;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-il__nvue-android {
|
||||
width: 128rpx !important;
|
||||
padding-right: 28rpx;
|
||||
right: 72rpx !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-il__indicator-text {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-il__indicator-after {
|
||||
width: 100rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
border-radius: 100rpx 0 100rpx 100rpx;
|
||||
background: #c9c9c9;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-il__key-color {
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
.fui-il__key-bg {
|
||||
background: var(--fui-bg-color-grey, #F1F4FA) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
Reference in New Issue
Block a user