121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<template>
|
|
<!-- 首字母检索 -->
|
|
<view>
|
|
<view class="letter touch" @touchstart.stop="searchStart" @touchmove.stop="searchMove" @touchend.stop="searchEnd">
|
|
<!-- 右边字母数据数据 触摸事件-->
|
|
<view class="letter-item" v-for="item in options" :key="item.key">{{item.key}}</view>
|
|
<!-- 左边字母跟右边字母true时 屏幕中心显示选中的首字母-->
|
|
</view>
|
|
<!-- 居中首字母样式 -->
|
|
<view class="cont-letter" v-if="isShowLetter">
|
|
{{showLetter}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
options: {
|
|
type: Array
|
|
},
|
|
length: {
|
|
type: Number
|
|
}
|
|
},
|
|
data() {
|
|
let windowHeight = uni.getSystemInfoSync().windowHeight
|
|
let startHeight = windowHeight * 0.1
|
|
return {
|
|
startHeight,
|
|
letterHeight: windowHeight - startHeight,
|
|
isShowLetter: false,
|
|
showLetter: ''
|
|
}
|
|
},
|
|
computed: {
|
|
letters() {
|
|
const arr = []
|
|
for (let key in this.options) {
|
|
arr.push(this.options[key])
|
|
}
|
|
return arr.key
|
|
}
|
|
},
|
|
methods: {
|
|
getLetter(pageY) {
|
|
let index = ((pageY - this.startHeight) / this.letterHeight) * this.options.length
|
|
return this.options[parseInt(index)].key
|
|
},
|
|
/* 检索字母拖动开始 */
|
|
searchStart(e) {
|
|
let pageY = e.touches[0].clientY;
|
|
this.showLetter = this.getLetter(pageY);
|
|
this.$emit("touchmove", this.showLetter)
|
|
this.isShowLetter = true
|
|
return false
|
|
},
|
|
/* 检索字母拖动中 */
|
|
searchMove(e) {
|
|
let pageY = e.touches[0].clientY;
|
|
this.showLetter = this.getLetter(pageY);
|
|
this.$emit("touchmove", this.showLetter)
|
|
return false
|
|
},
|
|
/* 检索字母拖动结束 */
|
|
searchEnd() {
|
|
setTimeout(() => {
|
|
this.isShowLetter = false
|
|
}, 1000)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 首字母样式 */
|
|
.letter {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 10%;
|
|
width: 30px;
|
|
height: 90%;
|
|
text-align: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #666;
|
|
background-color: transparent;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 右边首字母样式 */
|
|
.touch {
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.letter-item {
|
|
color: #1B66FF;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* 居中显示的选中首字母 */
|
|
.cont-letter {
|
|
background-color: #666;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -50px;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 10px;
|
|
font-size: 26px;
|
|
z-index: 1
|
|
}
|
|
</style>
|