|
@@ -1,9 +1,10 @@
|
|
<template>
|
|
<template>
|
|
<view class="container">
|
|
<view class="container">
|
|
- <!-- <view class="indexPosition">
|
|
|
|
- <view class="activeKey" v-for="(item,index) in keyList" @click="activeKeyHandle(item)">{{item}}
|
|
|
|
|
|
+ <view class="indexPosition">
|
|
|
|
+ <view :class="[currentKey==item.name?'activeKey on':'activeKey']" v-for="(item,index) in keyList" @click="activeKeyHandle(item.name)">{{item.name}}
|
|
</view>
|
|
</view>
|
|
- </view> -->
|
|
|
|
|
|
+ </view>
|
|
|
|
+ <view v-if="ifShowKeyTip" :animation="animationData" class="pop">{{tipText}}</view>
|
|
<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="top" scroll-with-animation="true" @scroll="scroll">
|
|
<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="top" scroll-with-animation="true" @scroll="scroll">
|
|
<view :class="[`box ${item.letter}`]" v-for="item in options">
|
|
<view :class="[`box ${item.letter}`]" v-for="item in options">
|
|
<view class="letter">{{item.letter}}</view>
|
|
<view class="letter">{{item.letter}}</view>
|
|
@@ -34,10 +35,13 @@
|
|
checkedList: [],
|
|
checkedList: [],
|
|
checkedListIds: [],
|
|
checkedListIds: [],
|
|
isSelectAll: false,
|
|
isSelectAll: false,
|
|
- keyList: [
|
|
|
|
- 'A', 'B', 'C', 'D'
|
|
|
|
- ],
|
|
|
|
- top:0
|
|
|
|
|
|
+ keyList: [],
|
|
|
|
+ top:0,
|
|
|
|
+ scrollTop:0,
|
|
|
|
+ currentKey:'',
|
|
|
|
+ animationData:{},
|
|
|
|
+ tipText:'',
|
|
|
|
+ ifShowKeyTip:false
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -51,46 +55,68 @@
|
|
this.checkedList = JSON.parse(JSON.stringify(newVal));
|
|
this.checkedList = JSON.parse(JSON.stringify(newVal));
|
|
this.$emit("listClick", this.checkedList);
|
|
this.$emit("listClick", this.checkedList);
|
|
}
|
|
}
|
|
-
|
|
|
|
},
|
|
},
|
|
options:function(){
|
|
options:function(){
|
|
- this.checkedList=[];
|
|
|
|
- this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
|
|
|
|
- this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
|
|
|
|
- }
|
|
|
|
|
|
+ this.initKeyIndex();
|
|
|
|
+ this.top=0;
|
|
|
|
+ // this.checkedList=[];
|
|
|
|
+ // this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
|
|
|
|
+ // this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
|
|
|
|
+ },
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
|
|
this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
|
|
- this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
|
|
|
|
- // console.log(this.checkedListIds);
|
|
|
|
|
|
+ this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
|
|
|
|
+ this.initKeyIndex();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ showKeyTip(){
|
|
|
|
+ var animation = uni.createAnimation({
|
|
|
|
+ duration: 1000,
|
|
|
|
+ timingFunction: 'ease',
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ this.animation = animation
|
|
|
|
+
|
|
|
|
+ animation.opacity(1).step();
|
|
|
|
+ this.animationData = animation.export();
|
|
|
|
+ },
|
|
|
|
+ initKeyIndex(){
|
|
|
|
+ this.keyList = [];
|
|
|
|
+ this.currentKey='';
|
|
|
|
+ this.options.map(item=>{
|
|
|
|
+ // console.log('item.letter',item.letter);
|
|
|
|
+ if(!item.letter)return null;
|
|
|
|
+ this.getDescBox(`.${item.letter}`).then(res=>{
|
|
|
|
+ // console.log(res);
|
|
|
|
+ this.keyList.push({
|
|
|
|
+ name:item.letter,
|
|
|
|
+ num:res
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ });
|
|
|
|
+ },
|
|
scroll(event){
|
|
scroll(event){
|
|
const {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} = event.detail;
|
|
const {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} = event.detail;
|
|
- console.log({scrollTop});
|
|
|
|
|
|
+ this.scrollTop = scrollTop;
|
|
|
|
+ // console.log(this.keyList);
|
|
|
|
+ const tempArr = this.keyList.filter(item=>scrollTop>=item.num-90);
|
|
|
|
+ const needArr = tempArr.pop();
|
|
|
|
+ // console.log({tempArr});
|
|
|
|
+ this.currentKey = needArr?needArr.name:'';
|
|
},
|
|
},
|
|
- activeKeyHandle(key) {
|
|
|
|
|
|
+ activeKeyHandle(key) {
|
|
|
|
+ this.ifShowKeyTip=true;
|
|
|
|
+ this.tipText = key.toUpperCase();
|
|
this.getDescBox(`.${key.toLowerCase()}`).then(res=>{
|
|
this.getDescBox(`.${key.toLowerCase()}`).then(res=>{
|
|
- console.log({res});
|
|
|
|
- console.log(`.${key.toLowerCase()}`);
|
|
|
|
- if(!res||res-80<=0||res == this.top-80)return;
|
|
|
|
- this.top = res-80;
|
|
|
|
-
|
|
|
|
- // let timer = setInterval(()=>{
|
|
|
|
- // this.top = this.top + 500;
|
|
|
|
- // if(this.top >=res-100 ){
|
|
|
|
- // clearInterval(timer);
|
|
|
|
- // }
|
|
|
|
- // },60);
|
|
|
|
- // uni.pageScrollTo({
|
|
|
|
- // duration:500, // 毫秒
|
|
|
|
- // scrollTop:100, // 位置
|
|
|
|
- // complete:()=>{
|
|
|
|
- // console.log('done');
|
|
|
|
- // }
|
|
|
|
- // });
|
|
|
|
-
|
|
|
|
- });
|
|
|
|
|
|
+ // console.log({res});
|
|
|
|
+ // console.log(`.${key.toLowerCase()}`);
|
|
|
|
+ if(!res||Math.abs(res)-90<=0||res == this.top-90)return;
|
|
|
|
+ this.top = Math.abs(res+this.scrollTop-90);
|
|
|
|
+ });
|
|
|
|
+ this.showKeyTip();
|
|
|
|
+ setTimeout(()=>this.ifShowKeyTip = false,1000);
|
|
},
|
|
},
|
|
// 获取元素距离顶部的高度
|
|
// 获取元素距离顶部的高度
|
|
getDescBox(className) {
|
|
getDescBox(className) {
|
|
@@ -155,20 +181,42 @@
|
|
align-items: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
position: absolute;
|
|
z-index: 10;
|
|
z-index: 10;
|
|
- right: 0;
|
|
|
|
|
|
+ right: 12.5rpx;
|
|
width: 50rpx;
|
|
width: 50rpx;
|
|
height: 100%;
|
|
height: 100%;
|
|
- background-color: red;
|
|
|
|
|
|
|
|
.activeKey {
|
|
.activeKey {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
flex: 1;
|
|
- width: 100%;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 17.5rpx;
|
|
|
|
+ font-family: SourceHanSansCN-Normal, SourceHanSansCN;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #7B8599;
|
|
|
|
+
|
|
|
|
+ &.on {
|
|
|
|
+ color: #3377FF;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ .pop {
|
|
|
|
+ position: fixed;
|
|
|
|
+ z-index: 100;
|
|
|
|
+ left:50%;
|
|
|
|
+ top:50%;
|
|
|
|
+ width: 125rpx;
|
|
|
|
+ height: 125rpx;
|
|
|
|
+ margin-left: -62.5rpx;
|
|
|
|
+ margin-top: -62.5rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height:125rpx;
|
|
|
|
+ font-size: 35rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background: rgba(0,0,0,0.6);
|
|
|
|
+ }
|
|
.scroll-Y {
|
|
.scroll-Y {
|
|
|
|
|
|
height: 100%;
|
|
height: 100%;
|