1. 仿微信字母表
a. 跳转模块在touchMove以及click中均触发,而alphabet将这两个事件均传递给同一个参数letter,list组件通过监听letter的变化来进行触发
b. 中间字母索引的初始状态应该为display: none,只有当a被触发时状态变为display: block,并且应该在a触发之后的.5s内结束,即:
template:
<div class="signAlphabet" ref="showAlphabet" v-if="hideAlphabet">{{letter}}</div>
script:
export default {
name: 'CityList',
props: {
letter: String,
},
data(){
return{
hideAlphabet: false
}
},
mounted() {
this.scroll = new Bscroll(this.$refs.wrapper)
},
watch: {
letter() {
if (this.letter) {
// console.log(this.$refs[this.letter]);数组,绑定在循环中的ref都是数组
const element = this.$refs[this.letter][0];
this.scroll.scrollToElement(element);
// this.hideAlphabet = true;
var this_ = this;
if(this.hideAlphabet===false){
this.hideAlphabet=true;
}
setTimeout(function(){//此处可以用箭头函数进行操作
this_.hideAlphabet=false;
},500)
// 错误
// console.log(this.$refs['showAlphabet']);
// this.$refs['signAlphabet'].style.display = 'block';
// 错误
// Bus.$on('stopShowAlphabet',
// () => this_.$refs['signAlphabet'].style.display = 'none'
// )
}
// console.log(this.letter);
}
},
}
此处的要点在于首先要判断中间索引的状态,如果状态是false,则变为true,然后设置setTimteOut,以控制当a事件触发结束后,等待0.5s其状态就变为false,注意点:setTimeOut中的this的指向windows,当使用箭头函数时,this指向定义时所在的作用域