Vue.component('my-header',{
template:`<div class="headerBox" :style="{'position':customFixed ? 'fixed':'static'}">
<div class="header" >
<slot name="left"></slot>
{{customTitle}}
<slot name="right"></slot>
</div></div>`,
props:{
'customTitle':{
type:String,
default:'标题'
},
'customFixed':{
type:Boolean,
default:true
}
}
});
Vue.component('my-list',{
template:`<div class="content" id="content">
<ul ref="listUser" @touchmove="bMove=true">
<li class="item" v-for="(index,item) in userData">
<p data-index="{{index}}">{{item.letter}}</p>
<ul>
<li v-for="bankName in item.data">{{bankName}}</li>
</ul>
</li>
</ul><div class="list_index" id="listIndex" ref="listIndex">
<ul id="list_index">
<li @touchstart="setScroll(item)" :class="redColorIndex==index?'redColor':''" @touchend="showBigLetter(item)" data-index="{{index}}" v-for="(index,item) in userIndex">{{item }}</li>
</ul>
</div>
<div class="showLetter" id="showLetter" v-if="showLetter">
<div class="letter">{{letter}}</div>
</div>
</div>`,
props:{
'user-data':{
type:Array,
default:[] }
},
data:function(){
return {
bMove:false,
letter:'',
showLetter:false,
defalutLetter:"B",
redColorIndex:0
}
},
mounted () {
},
computed:{
userIndex:function(){
return this.filterIndex(this.userData);
}
},methods:{
filterIndex:function(data){
var resultIndex = [];
for(var i=0;i<data.length;i++){
if(data[i].letter){
resultIndex.push(data[i].letter);
}
}
return resultIndex;
},setLisIndexPos:function(){
var iH = document.getElementById('listIndex').offsetHeight;
document.getElementById('listIndex').style.marginTop = - iH / 2 +"px";
},setScroll:function(letter){
var el = document.documentElement?document.documentElement:document.body;
var aP = document.getElementsByTagName('p');
var aLi = document.getElementById('list_index').getElementsByTagName('li');
for(var i=0;i<aP.length;i++){
if(aP[i].innerText.toLocaleString() == letter.toLocaleString()){
el.scrollTop = aP[i].offsetTop;
for(var j=0;j<aLi.length;j++){
if(aLi[j].getAttribute('data-index')==i){
this.redColorIndex = i;
}
}
}
}
},showBigLetter:function(letter){
var that = this;
that.showLetter = true;
if(that.showLetter){
that.letter = letter;
setTimeout(function(){
that.showLetter = false;
},1000)
