11
This commit is contained in:
18500206848
120
components/nyn-city-list/letter-list.vue
Normal file
120
components/nyn-city-list/letter-list.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<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>
|
||||
192
components/nyn-city-list/nyn-city-list.vue
Normal file
192
components/nyn-city-list/nyn-city-list.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 搜索框 -->
|
||||
<view class='search'>
|
||||
搜索<input type='text' v-model="keyValue" placeholder='请输入银行名称' placeholder-style="font-size:32rpx;color:#cccccc" />
|
||||
</view>
|
||||
<scroll-view ref="view" scroll-y="true" :scroll-top="scrollTop" :style="{height:`${winHeight}px`}">
|
||||
<!-- 循环城市数据 -->
|
||||
<view v-for="group in data.data" :key="group.key">
|
||||
<!-- 循环首字母检索信息 -->
|
||||
<view class="list_letter">{{group.key}}</view>
|
||||
<!-- 城市ID城市名称 -->
|
||||
<view class="item_city" v-for="item in group.value" :key="item.id" @tap="click(item)">{{item.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<letter-list :options="data.letters" @touchmove="setScrollTop"></letter-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import letterList from './letter-list.vue'
|
||||
|
||||
function getFirstLetter(str) {
|
||||
return str[0];
|
||||
}
|
||||
|
||||
function fortmat(data, itemH, tHeight) {
|
||||
let index = 0
|
||||
const letters = []
|
||||
const scrollTop = {}
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
const value = data[i].value
|
||||
const key = data[i].key
|
||||
letters.push({
|
||||
key,
|
||||
value: value.length
|
||||
})
|
||||
scrollTop[key] = index
|
||||
index += value.length
|
||||
}
|
||||
return {
|
||||
data,
|
||||
letters,
|
||||
scrollTop
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
letterList
|
||||
},
|
||||
name: "NynCityList",
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
prop: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
name: 'name'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyValue: '',
|
||||
itemH: 0, //字母列表的高度
|
||||
scrollTop: 0,
|
||||
tHeight: 0,
|
||||
winHeight: 0, //城市列表窗口高度
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.initList()
|
||||
},
|
||||
methods: {
|
||||
/* 列表初始化 */
|
||||
initList() {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select(".item_city").boundingClientRect(scrollx=>{
|
||||
this.itemH = scrollx.height
|
||||
})
|
||||
query.select(".list_letter").boundingClientRect(scrollx=>{
|
||||
this.tHeight = scrollx.height
|
||||
})
|
||||
query.select('.search').boundingClientRect(data => {
|
||||
let top = data.height
|
||||
this.winHeight = sysInfo.windowHeight - top - 1;
|
||||
}).exec();
|
||||
},
|
||||
click(item) {
|
||||
this.$emit('change', item)
|
||||
},
|
||||
/* 设置scroll-view滚动距离 */
|
||||
setScrollTop(showLetter) {
|
||||
var letters = this.data.letters
|
||||
var letterIndex = 0
|
||||
for (var i = 0; i < letters.length; i++) {
|
||||
if (showLetter === letters[i].key) {
|
||||
letterIndex = i
|
||||
}
|
||||
}
|
||||
this.scrollTop = (this.data.scrollTop[showLetter] * this.itemH) + (letterIndex * this.tHeight)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
data() {
|
||||
return fortmat(this.options, this.itemH, this.tHeight)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyValue(value) {
|
||||
this.$emit('filter-method', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #ffffff;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
// border-radius:100rpx;
|
||||
|
||||
padding: 20rpx 0;
|
||||
width: 730rpx;
|
||||
margin-left: 20rpx;
|
||||
border-bottom: 1rpx solid #ddd;
|
||||
|
||||
input {
|
||||
line-height: 60rpx;
|
||||
text-align: left;
|
||||
padding-left: 20rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 循环数据首字母检索 */
|
||||
.list_letter {
|
||||
display: flex;
|
||||
background-color: #f8f8f8;
|
||||
height: 60rpx;
|
||||
color: #2a2a2a;
|
||||
font-size: 26rpx;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 城市样式 */
|
||||
.item_city {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
height: 60rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
width: 730rpx;
|
||||
margin-left: 20rpx;
|
||||
border-bottom: 2rpx solid #ddd;
|
||||
}
|
||||
|
||||
.list {
|
||||
.eng {
|
||||
background: #ffffff;
|
||||
padding: 30rpx;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #212121;
|
||||
font-size: 26rpx;
|
||||
margin: 30rpx 0 0 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px solid #E6E6E6
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user