vue+js实现字母索引（仿通讯录，仿联系⼈）
仿照通讯录实现字母索引，详情看下图
1.⾸先页⾯布局
<div class="country" ref="listview" v-show="countryList.length>0"  v-cloak @scroll="setScrollY">
<ul class="country-list">
<li v-for="(group,index) in countryList" :key="index" ref="listGroup">
<h2 class="list-group-title">{{group.title}}</h2>
<ul>
<li v-for="(item,index1) in group.items"  :key="index1" :class="[{active:flagCode==Code},'list-group-item']" @click="Code">                <span class="name">{{Code}}</span>
<span>{{}}</span>
<span>{{item.address}}</span>
</li>
</ul>
</li>
</ul>
<ul class="list-shortcut">
<li @click.stop.prevent="onClickCode(index)"  :class="[{selected:fixedTitle==item},'item']" v-for="(item,index) in shortcut" :key="index">{{item}}</li>
</ul>
</div>
2.js代码
export default {
data() {
return {
countryList: [],
shortcut: [],
flagCode: '93',
listHeight: [],
scrollY: -1,
currentIndex: 0,
resData: [{"org":"阿富汗","address":"Afghanistan","orgCode":"AF","Code":"93"},],
}
},
methods: {
getList(){
let data = {
pageIndex:1,
pageSize:1000,
keyWord: this.keyWord
keyWord: this.keyWord
}
}else{
this.$('查询失败');
}
})
},
setScrollY(){
this.scrollY = $('.country').scrollTop()
},
getCountryList() {
let res = sData;
this.shortcut=[];
// 格式化数据
var map = {};
res.forEach((item, index) => {
var key = Code.slice(0, 1);
if (!map[key]) {
this.shortcut.push(key)
map[key] = {
title: key,
items: []
}
}
map[key].items.push(item);
})
// 转为数组
var ret = [];
for (var k in map) {网站底部代码js特效
var val = map[k];
ret.push(val);
}
// 排序
ret.sort((a, b)=>{
return a.title.charCodeAt(0) - b.title.charCodeAt(0);
});
this.shortcut.sort((a, b) =>{
return a.charCodeAt(0) - b.charCodeAt(0);
});
/
/ })
},
onClickCode(index){
this.scrollToIndex(index);
this.isTouch = true;
},
scrollToIndex(index) {
this.$refs.listview.scrollTo(0, this.listHeight[index])
},
calculateTotalHeight() {
var list = this.$refs.listGroup
var height = 0
this.listHeight.push(height)
if(list&&list.length>0){
for (var i = 0; i < list.length; i++) {
var item = list[i]
height += item.clientHeight
this.listHeight.push(height)
}
}
}
}
},
created() {
},
computed: {
fixedTitle() {
return this.shortcut[this.currentIndex] ? this.shortcut[this.currentIndex] : 'A'      }
},
mounted() {
setTimeout(()=>{
this.calculateTotalHeight()
}, 200)
},
watch: {
scrollY(newY) {
var listHeight = this.listHeight
// 当滚动到顶部时， newY<=0
if (newY <= 0) {
this.currentIndex = 0
return
}
/
/ 中间部分滚动
for (var i = 0; i < listHeight.length - 1; i++) {
var height1 = listHeight[i]
var height2 = listHeight[i + 1]
if (!height2 || (newY >= height1 && newY < height2)) {
this.currentIndex = i
this.diff = height2 - newY
return
}
}
// 滚动到底部且newY⼤于最后⼀个元素的上限
this.currentIndex = listHeight.length - 1
},
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。