826 lines
20 KiB
Vue
826 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<view class="hao-bigbox" :style="{'top':statusBarHeight+'px','height':`calc(100% - ${statusBarHeight}px)`}">
|
|||
|
|
<!-- 搜索 -->
|
|||
|
|
<view class="hao-search" v-if="isSearch">
|
|||
|
|
<view class="hao-searchCent">
|
|||
|
|
<image src="/static/images/search_1.png" class="hao-searchImg"></image>
|
|||
|
|
<input type="text" v-model="inputKey" @input="searchInput" placeholder="请输入你的服务地址"
|
|||
|
|
class="hao-searchInput" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 搜索内容 -->
|
|||
|
|
<view v-if="isSearch && searchList.length > 0" class="hao-searchScroll">
|
|||
|
|
<scroll-view scroll-y style="width:100%;height:100%;">
|
|||
|
|
<view>
|
|||
|
|
<view class="hao-secondEach" v-for="(item,index) in searchList" :key="item[idValue]"
|
|||
|
|
@tap="selectIndex(item)">
|
|||
|
|
<view class="hao-avatar" v-if="isAvatar">
|
|||
|
|
<image :src="item[avatarValue]" class="hao-avatarImg"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="hao-text">
|
|||
|
|
<view class="hao-name">{{item[nameValue]}}</view>
|
|||
|
|
<view class="hao-fu" v-if="isFu">{{item[fuValue]}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 右侧索引 -->
|
|||
|
|
<view class="hao-letters" v-if="isLetters&&searchList.length <= 0"
|
|||
|
|
:style="{'top':isSearch?'120rpx':'0rpx','height':isSearch?'calc(100% - 120rpx)':'100%'}">
|
|||
|
|
<image src="/static/haoIndexListImg/top.png" class="hao-letterTop" v-if="isTop" @tap="goTop"></image>
|
|||
|
|
<view v-for="(item,index) in letters" :key="item"
|
|||
|
|
:style="{'height':indexEachHH+'rpx','background-color':(currentCeiling==index&&isIndexAc)?indexAcColor:''}"
|
|||
|
|
class="hao-lettersEach" :class="(currentCeiling==index&&isIndexAc)?'hao-lettersEachAc':''"
|
|||
|
|
@touchmove="handleTouchMove" @touchend="handleTouchEnd(item,index)"
|
|||
|
|
@tap="handleLetterClick(item,index)">
|
|||
|
|
{{item}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提示当前索引 -->
|
|||
|
|
<view class="hao-toastIndex" v-if="isIndexToast && toastIndex">{{toastIndex}}</view>
|
|||
|
|
|
|||
|
|
<!-- 吸顶 -->
|
|||
|
|
|
|||
|
|
<view class="ceiling"
|
|||
|
|
v-if="currentCeiling !== null&&isCeil&&listInfo.length>0&&searchList.length <= 0&&isOkCurrent"
|
|||
|
|
:style="{'top':isSearch?'120rpx':'0rpx'}">{{listInfo[currentCeiling].id.split('-')[1]}}</view>
|
|||
|
|
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<scroll-view scroll-y class="hao-scroll" @scroll="listenScroll" :scroll-top="scrollTop"
|
|||
|
|
:scroll-into-view="scrollEachId" v-show="searchList.length <= 0"
|
|||
|
|
:style="{'top':isSearch?'120rpx':'0rpx','height':isSearch?'calc(100% - 120rpx)':'100%'}">
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
<view class="hao-modu" v-if="isCurrentCity || isHotCity">
|
|||
|
|
<!-- <view class="hao-current" v-if="isCurrentCity">
|
|||
|
|
<view class="hao-moduTitle">当前定位城市</view>
|
|||
|
|
<view class="hao-currentBox">
|
|||
|
|
<view class="hao-currentLs">
|
|||
|
|
<image src="/static/haoIndexListImg/posi.png" class="hao-currentImg"></image>
|
|||
|
|
<view class="hao-currentCity" @tap="selectIndex(currentCity)">{{currentCity[nameValue] || '暂无'}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="hao-hotCity" v-if="isHotCity && hotCity.length>0">
|
|||
|
|
<view class="hao-moduTitle">热门城市</view>
|
|||
|
|
<view class="hao-hotCityBox">
|
|||
|
|
<view v-for="(item,index) in hotCity" :key="item[idValue]" @tap="selectIndex(item)"
|
|||
|
|
class="hao-hotEachCity">{{item[nameValue]}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-for="(item,index) in cityList" :key="index" class="hao-each">
|
|||
|
|
<view class="hao-eachTitle" :id="'hao-'+index">{{index}}</view>
|
|||
|
|
<view class="hao-second">
|
|||
|
|
<view v-for="(ite,ind) in item" :key="ite[idValue]" class="hao-secondEach"
|
|||
|
|
@tap="selectIndex(ite)">
|
|||
|
|
<view class="hao-avatar" v-if="isAvatar">
|
|||
|
|
<image :src="ite[avatarValue]" class="hao-avatarImg"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="hao-text">
|
|||
|
|
<view class="hao-name">{{ite[nameValue]}}</view>
|
|||
|
|
<view class="hao-fu" v-if="isFu">{{ite[fuValue]}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import ChinaCitys from '../../../static/data/newChinaCitys.json'
|
|||
|
|
export default {
|
|||
|
|
name: 'hao-indexList',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
inputKey: '', //搜索关键字
|
|||
|
|
searchTimeout: null, //搜索防抖
|
|||
|
|
searchList: [], //搜索内容
|
|||
|
|
scrollEachId: 'all', //跳转到对应列表子项的id
|
|||
|
|
toastIndex: '', //当前索引提示内容
|
|||
|
|
indexEachHH: 36, //索引项的高度，单位rpx
|
|||
|
|
afterConverHH: 0, //索引项的高度转换成PX值
|
|||
|
|
indexFirstTT: 0, //索引第一个子元素顶部位置，单位px
|
|||
|
|
indexLastBB: 0, //索引最后一个子元素底部位置，单位px
|
|||
|
|
isOk: true, //索引滑动节流
|
|||
|
|
isIndexGo: false, //在滑动索引时是否让列表跳转
|
|||
|
|
currentCeiling: null, //当前吸顶项和当前索引
|
|||
|
|
listInfo: [], //列表分类项位置信息
|
|||
|
|
scrollInfo: {}, //scroll的位置信息
|
|||
|
|
scrollTop: 0.01, //跳转至scroll某个位置
|
|||
|
|
isOkCurrent: false, //当列表不长时，吸顶就不显示
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// 获取状态栏高度并将单位转为rpx
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
const systemInfo = uni.getSystemInfoSync()
|
|||
|
|
const screenWidth = systemInfo.screenWidth
|
|||
|
|
this.statusBarHeight = (screenWidth * (systemInfo.statusBarHeight * 2 + 88)) / 750;
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.statusBarHeight = 44;
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
//右侧索引
|
|||
|
|
letters: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
//是否显示右侧索引
|
|||
|
|
isLetters: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//是否显示索引提示
|
|||
|
|
isIndexToast: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//id对应的值名
|
|||
|
|
idValue: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'id'
|
|||
|
|
},
|
|||
|
|
//名字对应的值名
|
|||
|
|
nameValue: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'name'
|
|||
|
|
},
|
|||
|
|
//当前城市
|
|||
|
|
currentCity: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
//是否显示当前城市
|
|||
|
|
isCurrentCity: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//热门城市
|
|||
|
|
hotCity: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
//是否显示热门城市
|
|||
|
|
isHotCity: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//是否显示搜索
|
|||
|
|
isSearch: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//城市列表
|
|||
|
|
cityList: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
//是否显示头像
|
|||
|
|
isAvatar: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
//头像对应的值名
|
|||
|
|
avatarValue: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'avatar'
|
|||
|
|
},
|
|||
|
|
//是否显示副标题
|
|||
|
|
isFu: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
//副标题对应的值名
|
|||
|
|
fuValue: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'fu'
|
|||
|
|
},
|
|||
|
|
//是否吸顶
|
|||
|
|
isCeil: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//是否显示当前索引背景色
|
|||
|
|
isIndexAc: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//当前索引背景色
|
|||
|
|
indexAcColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#5594f9'
|
|||
|
|
},
|
|||
|
|
//是否显示回顶部图标
|
|||
|
|
isTop: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.afterConverHH = uni.upx2px(this.indexEachHH); //将索引项的高度值转成px
|
|||
|
|
this.getLocation();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//回顶部
|
|||
|
|
goTop() {
|
|||
|
|
this.scrollTop = 0;
|
|||
|
|
//防止第二次点击不跳
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.scrollTop = 0.01;
|
|||
|
|
}, 200)
|
|||
|
|
},
|
|||
|
|
//搜索输入
|
|||
|
|
searchInput() {
|
|||
|
|
if (this.searchTimeout) {
|
|||
|
|
clearTimeout(this.searchTimeout)
|
|||
|
|
}
|
|||
|
|
if (!this.inputKey) {
|
|||
|
|
this.searchList = [];
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
//查询匹配的数据
|
|||
|
|
this.searchTimeout = setTimeout(() => {
|
|||
|
|
// let data = this.cityList;
|
|||
|
|
let result = [];
|
|||
|
|
|
|||
|
|
// let list = Object.values(data).flat();
|
|||
|
|
// list.map(r => {
|
|||
|
|
// if (r[this.nameValue].indexOf(this.inputKey) !== -1) {
|
|||
|
|
// result.push(r)
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
ChinaCitys.districts[0].districts.forEach(item => {
|
|||
|
|
if (item.name == '台湾省') {
|
|||
|
|
if (item.name.startsWith(this.inputKey)) {
|
|||
|
|
result.push({
|
|||
|
|
'name': '台湾',
|
|||
|
|
'adcode': item.adcode,
|
|||
|
|
"center": item.center,
|
|||
|
|
"citycode": item.citycode,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else if (item.name == '香港特别行政区') {
|
|||
|
|
if (item.name.startsWith(this.inputKey)) {
|
|||
|
|
result.push({
|
|||
|
|
'name': '香港',
|
|||
|
|
'adcode': item.adcode,
|
|||
|
|
"center": item.center,
|
|||
|
|
"citycode": item.citycode,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else if (item.name == '澳门特别行政区') {
|
|||
|
|
if (item.name.startsWith(this.inputKey)) {
|
|||
|
|
result.push({
|
|||
|
|
'name': '澳门',
|
|||
|
|
'adcode': item.adcode,
|
|||
|
|
"center": item.center,
|
|||
|
|
"citycode": item.citycode,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else if (item.name == '重庆市') {
|
|||
|
|
if (item.name.startsWith(this.inputKey)) {
|
|||
|
|
result.push({
|
|||
|
|
'name': '重庆',
|
|||
|
|
'adcode': item.adcode,
|
|||
|
|
"center": item.center,
|
|||
|
|
"citycode": item.citycode,
|
|||
|
|
})
|
|||
|
|
item.districts.forEach(item2 => {
|
|||
|
|
console.log(item2)
|
|||
|
|
if (item2.name == '重庆郊县') {
|
|||
|
|
item2.districts.forEach(item3 => {
|
|||
|
|
result.push({
|
|||
|
|
'name': `${item3.name},${item2.name},${item.name}`,
|
|||
|
|
'adcode': item3.adcode,
|
|||
|
|
"center": item3.center,
|
|||
|
|
"citycode": item3.citycode,
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else if (item.name == '天津市') {
|
|||
|
|
if (item.name.startsWith(this.inputKey)) {
|
|||
|
|
result.push({
|
|||
|
|
'name': '天津',
|
|||
|
|
'adcode': item.adcode,
|
|||
|
|
"center": item.center,
|
|||
|
|
"citycode": item.citycode,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
item.districts.forEach(item2 => {
|
|||
|
|
if (item2.name.startsWith(this.inputKey)) {
|
|||
|
|
result.push({
|
|||
|
|
'name': `${item2.name},${item.name}`,
|
|||
|
|
'adcode': item2.adcode,
|
|||
|
|
"center": item2.center,
|
|||
|
|
"citycode": item2.citycode,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
item2.districts.forEach(item3 => {
|
|||
|
|
if (item3.name.startsWith(this.inputKey)) {
|
|||
|
|
result.push({
|
|||
|
|
'name': `${item3.name},${item2.name},${item.name}`,
|
|||
|
|
'adcode': item3.adcode,
|
|||
|
|
"center": item3.center,
|
|||
|
|
"citycode": item3.citycode,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
console.log(result)
|
|||
|
|
this.searchList = result;
|
|||
|
|
}, 800)
|
|||
|
|
},
|
|||
|
|
//获取节点信息
|
|||
|
|
getLocation() {
|
|||
|
|
const that = this;
|
|||
|
|
//获取每项索引的位置信息
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
.in(this)
|
|||
|
|
.selectAll('.hao-lettersEach')
|
|||
|
|
.boundingClientRect(rect => {
|
|||
|
|
that.indexFirstTT = Math.round(rect[0].top);
|
|||
|
|
that.indexLastBB = Math.round(rect[rect.length - 1].bottom);
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
|
|||
|
|
//获取scroll位置信息
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
.in(this)
|
|||
|
|
.select('.hao-scroll')
|
|||
|
|
.boundingClientRect(rect => {
|
|||
|
|
that.scrollInfo = rect;
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
|
|||
|
|
//获取列表每个分类项位置信息
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
.in(this)
|
|||
|
|
.selectAll('.hao-eachTitle')
|
|||
|
|
.boundingClientRect(rect => {
|
|||
|
|
that.listInfo = rect;
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
},
|
|||
|
|
//监听滚动
|
|||
|
|
listenScroll(e) {
|
|||
|
|
let top = this.scrollInfo.top || e.target.offsetTop; //scroll顶部的位置
|
|||
|
|
let scrollTop = e.detail.scrollTop; //scroll滚动了多少
|
|||
|
|
let allTop = top + scrollTop;
|
|||
|
|
|
|||
|
|
if (this.currentCeiling !== null) {
|
|||
|
|
//大于最后一个
|
|||
|
|
if (allTop >= this.listInfo[this.listInfo.length - 1].top) {
|
|||
|
|
this.currentCeiling = this.listInfo.length - 1;
|
|||
|
|
return
|
|||
|
|
} else if (allTop > this.listInfo[this.currentCeiling].top && allTop > this.listInfo[this
|
|||
|
|
.currentCeiling + 1].top) {
|
|||
|
|
//当前位置远大于上一个的位置，通过遍历查询在哪
|
|||
|
|
//查询当前所在的位置
|
|||
|
|
let aa = this.listInfo.slice(this.currentCeiling + 1, this.listInfo.length); //截取后半段遍历
|
|||
|
|
let bb = true;
|
|||
|
|
aa.some((r, v) => {
|
|||
|
|
if (allTop < r.top && bb) {
|
|||
|
|
this.currentCeiling += v;
|
|||
|
|
bb = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//当前位置小于之前
|
|||
|
|
if (allTop < this.listInfo[this.currentCeiling].top) {
|
|||
|
|
//小于第一个就隐藏
|
|||
|
|
if (allTop < this.listInfo[0].top) {
|
|||
|
|
this.currentCeiling = null;
|
|||
|
|
} else {
|
|||
|
|
let aa = this.listInfo.slice(0, this.currentCeiling).reverse(); //截取前半段遍历并倒序
|
|||
|
|
let bb = true;
|
|||
|
|
aa.some((r, v) => {
|
|||
|
|
if (allTop >= r.top && bb) {
|
|||
|
|
this.currentCeiling = this.currentCeiling - v - 1;
|
|||
|
|
bb = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
//在第一个与第二个之间
|
|||
|
|
if (this.listInfo.length > 0 && allTop >= this.listInfo[0].top && allTop < this.listInfo[1].top) {
|
|||
|
|
this.currentCeiling = 0;
|
|||
|
|
//当列表够长时才让吸顶显示
|
|||
|
|
if (!this.isOkCurrent) {
|
|||
|
|
this.isOkCurrent = true;
|
|||
|
|
}
|
|||
|
|
} else if (this.listInfo.length > 0 && allTop > this.listInfo[0].top && allTop > this.listInfo[1]
|
|||
|
|
.top) {
|
|||
|
|
let bb = true;
|
|||
|
|
this.listInfo.some((r, v) => {
|
|||
|
|
if (allTop < r.top && bb) {
|
|||
|
|
this.currentCeiling = v;
|
|||
|
|
bb = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
//当列表够长时才让吸顶显示
|
|||
|
|
if (!this.isOkCurrent) {
|
|||
|
|
this.isOkCurrent = true;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.currentCeiling = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//选取
|
|||
|
|
selectIndex(e) {
|
|||
|
|
if (!e || e.target) return;
|
|||
|
|
console.log('选取', e)
|
|||
|
|
this.$emit('haoTap', e);
|
|||
|
|
},
|
|||
|
|
//点击索引跳对应项
|
|||
|
|
handleLetterClick(e, index) {
|
|||
|
|
this.scrollEachId = 'hao-' + e;
|
|||
|
|
this.currentCeiling = index;
|
|||
|
|
},
|
|||
|
|
//手指在索引滑动中
|
|||
|
|
handleTouchMove(e) {
|
|||
|
|
if (this.isOk) {
|
|||
|
|
//节流
|
|||
|
|
this.isOk = false;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
//当前滑动到的位置
|
|||
|
|
if (e.touches[0]) {
|
|||
|
|
let nowY = Math.round(e.touches[0].pageY); //四舍五入
|
|||
|
|
//在索引区域内
|
|||
|
|
if (nowY >= this.indexFirstTT && nowY <= this.indexLastBB) {
|
|||
|
|
let aa = nowY - this.indexFirstTT;
|
|||
|
|
let bb = aa / this.afterConverHH;
|
|||
|
|
let cc = parseInt(bb);
|
|||
|
|
if (bb > cc) {
|
|||
|
|
this.toastIndex = this.letters[cc]; //提示索引
|
|||
|
|
//当end方法比move方法先执行时
|
|||
|
|
if (this.isIndexGo) {
|
|||
|
|
this.isIndexGo = false;
|
|||
|
|
this.currentCeiling = cc;
|
|||
|
|
this.scrollEachId = 'hao-' + this.letters[cc]; //跳到索引指定位置
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.toastIndex = ''; //关闭提示
|
|||
|
|
}, 700)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.toastIndex = this.letters[cc - 1]; //提示索引
|
|||
|
|
//当end方法比move方法先执行时
|
|||
|
|
if (this.isIndexGo) {
|
|||
|
|
this.isIndexGo = false;
|
|||
|
|
this.currentCeiling = cc - 1;
|
|||
|
|
this.scrollEachId = 'hao-' + this.letters[cc - 1]; //跳到索引指定位置
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.toastIndex = ''; //关闭提示
|
|||
|
|
}, 700)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
//超出范围就为空
|
|||
|
|
this.toastIndex = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.isOk = true;
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//手指在索引滑动结束
|
|||
|
|
handleTouchEnd(e, index) {
|
|||
|
|
//有索引值才跳转
|
|||
|
|
if (this.toastIndex) {
|
|||
|
|
//isOk为true代表滑动真正结束，否则让isIndexGo来决定最后跳转
|
|||
|
|
//由于滑动方法处做了节流，当快速滑动时end会比move先执行
|
|||
|
|
if (this.isOk) {
|
|||
|
|
this.scrollEachId = 'hao-' + this.toastIndex; //跳到索引指定位置
|
|||
|
|
this.currentCeiling = index;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.toastIndex = '';
|
|||
|
|
}, 700)
|
|||
|
|
} else {
|
|||
|
|
this.isIndexGo = true; //让滑动处来执行跳转
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.hao-bigbox {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
|
|||
|
|
/* 搜索 */
|
|||
|
|
.hao-search {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 120rpx;
|
|||
|
|
padding-top: 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.hao-searchCent {
|
|||
|
|
width: 690rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border: 2rpx solid #E8101E;
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 68rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.hao-searchImg {
|
|||
|
|
width: 29rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-searchInput {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
::v-deep .uni-input-placeholder {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #CCCCCC;
|
|||
|
|
line-height: 34rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*搜索结果*/
|
|||
|
|
.hao-searchScroll {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 120rpx;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 120rpx);
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*右侧索引*/
|
|||
|
|
.hao-letters {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 60rpx;
|
|||
|
|
z-index: 6;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.hao-letterTop {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-lettersEach {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-lettersEachAc {
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*当前索引提示内容*/
|
|||
|
|
.hao-toastIndex {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
line-height: 160rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 56rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
z-index: 6;
|
|||
|
|
background-color: #ddd;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 当前与热门 */
|
|||
|
|
.hao-modu {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
background: #fff;
|
|||
|
|
margin-bottom: 19rpx;
|
|||
|
|
|
|||
|
|
.hao-current {
|
|||
|
|
width: 100%;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-hotCity {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-moduTitle {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-currentBox {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.hao-currentLs {
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border: 2rpx solid #eee;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.hao-currentImg {
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-currentCity {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-hotCityBox {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
column-gap: 22rpx;
|
|||
|
|
row-gap: 20rpx;
|
|||
|
|
|
|||
|
|
.hao-hotEachCity {
|
|||
|
|
width: 156rpx;
|
|||
|
|
height: 58rpx;
|
|||
|
|
background: #EFEFEF;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 数据列表 */
|
|||
|
|
.hao-scroll {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
|
|||
|
|
.hao-each {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.hao-eachTitle {
|
|||
|
|
display: inline-table;
|
|||
|
|
width: 19rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
|
|||
|
|
padding: 20rpx 0rpx;
|
|||
|
|
margin: 0rpx 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-weight: 600;
|
|||
|
|
width: 690rpx;
|
|||
|
|
border-bottom: 1px solid #f4f4f4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-second {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*吸顶*/
|
|||
|
|
.ceiling {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 1;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
background-color: #f4f4f4;
|
|||
|
|
padding: 10rpx 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*搜索结果与列表的每一项*/
|
|||
|
|
.hao-secondEach {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
border-bottom: 2rpx solid #f4f4f4;
|
|||
|
|
|
|||
|
|
.hao-avatar {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
|
|||
|
|
.hao-avatarImg {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-text {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.hao-name {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-fu {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hao-secondEach:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|