- 给body注册点击事件, 结果点击document.body 无法触发事件.就想点击document空白位置也要下拉列表隐藏
- 点击上面的带黄色的字母后需要找到下拉列表对应的字母然后往上移动高度, 出现高度向下偏移了100px左右,
这个高度该怎么计算准确,
想让滚动条往上滚动到固定位置,给点击的li添加了transiton无动画效果
<body @click="hideDropDown">
<div id="select">
<div class="select-wrap" @click="toggle">
<div ref="box"></div>
<span class="arrowIcon" :class="{active: iconBol}"></span>
</div>
<div class="dropdown" v-show="showSelectBol" >
<ul class="list_index">
<span>筛选</span>
<li class="ty-alphaList" v-for="item in sportIndex" @click="setScoll">{{item}}</li>
</ul>
<ul class="list_sport_name" ref="sportsList" id="dropdown">
<li v-for="(sports, index) in sportData">
<p>{{sports.firstLetter}}</p>
<ul class="dorpList">
<li v-for="sport in sports.users" @click="changeValue(sport)">
<strong>{{sport.majorKindName}}</strong>{{sport.activityName}}
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
setScoll (event) {
console.log('test')
let ev = window.event || event
// ev.target.innerHTML
console.log(ev.target.innerHTML)
// 找到所有的P标签然后对其进行遍历 点击进行滚动条滚动
let aP = this.$refs.sportsList.getElementsByTagName('p')
for (let i = 0; i < aP.length; i++) {
if(aP[i].innerHTML == ev.target.innerHTML) {
console.log(aP[i].offsetTop)
dropdown.scrollTop = aP[i].offsetTop
console.log(dropdown.scrollTop)
}
}
},
hideDropDown(){
console.log('test');
this.showSelectBol = false
},
极客观点
项目管理
HarmonyOS
html5