vue realizes the mobile phone address book function for your reference. The specific content is as follows
<!DOCTYPE html>
<html>
<head>
<title>Dynamically load components</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.headerBox{
position: fixed;
overflow: hidden;
width: 100%;
z-index: 999;
margin-bottom: 40px;
}
.header{
height: 40px;
line-height: 40px;
background: #ccc;
color: white;
text-align: center;
border: 1px solid #ddd;
padding-left: 15px;
padding-right: 15px;
}
.header button:nth-of-type(1){
float: left;
}
.header button:nth-of-type(2){
float: right;
}
.header button{
height: 40px;
padding: 0px 5px;
}
.header button:last-child{
float: right;
}
.content{
position: relative;
}
.item p{
background: #ccc;
color: white;
padding-left: 20px;
line-height: 30px;
font-size: 0.9rem;
}
.item ul li{
border-bottom: 1px solid #ddd;
line-height: 30px;
padding: 3px 0px 3px 30px;
font-size: 0.7rem;
}
.list_index{
position: fixed;
right: 15px;
top: 50%;
text-align: center;
z-index: 999;
}
.list_index ul li{
line-height: 20px;
cursor: pointer;
font-size: 0.625rem;
}
.redColor{
color: red;
}
#alert{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
left: 0px;
top: 0px;
z-index: 99999;
display: flex;
}
#alert .alert_content{
width: 70%;
height: 140px;
background: white;
border-radius: 5px;
margin: auto;
position: relative;
}
#alert .alert_title{
padding: 8px;
border-bottom: 1px solid #ddd;
}
#alert .alert_tel{
height: 50px;
line-height: 50px;
text-align: center;
}
#alert .alert_btn{
position: absolute;
right: 0px;
bottom: 5px;
}
#alert .alert_btn button{padding: 8px 12px;margin-right: 10px;border-width: 0px;border-radius:5px ;}
button:active,button:focus{outline:none;}
#alert .alert_btn button:first-child{background-color: #00a5e0;color: white;}
.showLetter{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0px;
top: 0px;
z-index: 99;
}
.showLetter .letter{
width: 1.8rem;
height: 1.8rem;
text-align: center;
line-height: 1.8rem;
background-color: #A0A0A0;
color: white;
border-radius: 50%;
font-size: 0.8rem;
}
</style>
</head>
<body>
<div >
<!--<my-header custom-title="Address Book" custom-fixed>-->
<!--<button slot="left">return</button>-->
<!--<button slot="right">Home page</button>-->
<!--</my-header>-->
<my-list :user-data="userData"></my-list>
</div>
</body>
<script type="text/javascript" src=""></script>
<script>
var userData = [{"letter":"B","data":["Bao Shang Bank","Beijing Rural Commercial Bank","Beijing Shunyi Ginza Rural Bank","Bank of Beijing","Bohai Bank"]},{"letter":"C","data":["Cangzhou Bank","Chengde Bank","Chongqing Rural Commercial Bank","Chongqing Qianjiang Ginza Rural Bank","Chongqing Bank","Chongqing Yubei Ginza Rural Bank"]},{"letter":"D","data":["Dalian Bank","Texas Bank","Dongguan Rural Commercial Bank","Bank of East Asia","Dongying Lai Shang Rural Bank","Dongying Bank"]},{"letter":"E","data":["Ordos Bank"]},{"letter":"F","data":["Fujian Strait Bank","Fujian Rural Credit Cooperative Union","Fuxin Bank","Fubon Huayi Bank","Fudian Bank"]},{"letter":"G","data":["Ganzhou Bank","Industrial and Commercial Bank of China","Guangdong Huaxing Bank","Guangdong Southeast Guangdong Bank","Guangdong Rural Credit Cooperative Union","GF Bank","Guangxi Beibu Gulf Bank","Guangxi Zhuang Autonomous Region Rural Credit Cooperative Union","Guangzhou Rural Commercial Bank","Guangzhou Bank","Guilin Bank"]},{"letter":"H","data":["Harbin Bank","Haikou United Rural Commercial Bank","Han Asian Bank","Hankou Bank","Hebei Bank","Hengfeng Bank","Hengshui Bank","Hubei Bank","Huzhou Bank","Huludao Bank","China Bank","Hui Shang Bank"]},{"letter":"J","data":["Jilin Bank","Jining Bank","Jiaxing Bank","Construction Bank","Jiangsu Bank","Jiangsu Yangtze Commercial Bank","Ginza Rural Bank, Ganzhou, Jiangxi","Jiangxi Rural Credit Cooperative Union","Bank of Communications","Jiaozuo China Travel Bank","Jinhua Bank","Jinzhou Bank","Jincheng Bank","Shenshang Bank","Jiujiang Bank"]},{"letter":"K","data":["Kunlun Bank","Kunshan Rural Commercial Bank"]},{"letter":"L","data":["Laishang Bank","Lanzhou Bank","Langfang Bank","Lin Shang Bank","Liuzhou Bank","Longjiang Bank","Luoyang Bank"]},{"letter":"M","data":["Mianyang Commercial Bank","Minsheng Bank"]},{"letter":"N","data":["Nanjing Bank","Inner * Bank","Ningbo Tongshang Bank","Ningbo Bank","Ningxia Yellow River Rural Commercial Bank","Ningxia Bank","Agricultural Bank"]},{"letter":"P","data":["Panzhihua Commercial Bank","Ping An Bank","Pingdingshan Bank","Qilu Bank","Qi Shang Bank","Corporate Bank","Qingdao Bank","Qinghai Bank"]},{"letter":"Q","data":["Quanzhou Bank"]},{"letter":"R","data":["Rizhao Bank"]},{"letter":"S","data":["Shandong Rural Credit Cooperative Union","Shanghai Bank","Shangrao Bank","Shaoxing Bank","Shenzhen Futian Ginza Rural Bank","Shenzhen Rural Commercial Bank","Shenzhen Qianhai WeBank","Sichuan Rural Credit Cooperative Union","Suzhou Bank"]},{"letter":"T","data":["Taizhou Bank","Taicang Rural Commercial Bank","Tianjin Rural Commercial Bank","Tianjin Bank"]},{"letter":"W","data":["Weihai Commercial Bank","Weifang Bank","Wenzhou Bank","Wuhan Rural Commercial Bank"]},{"letter":"X","data":["Xi'an Bank","Xiamen International Bank","Xiamen Bank","Xinhan Bank","Xingtai Bank","Industry Bank"]},{"letter":"Y","data":["Yantai Bank","Yingkou Bank","Post Savings Bank","Youli Bank"]},{"letter":"Z","data":["Zaozhuang Bank","Zhangjiagang Rural Commercial Bank","Chang'an Bank","Changsha Bank","China Merchants Bank","Zhejiang Chouzhou Commercial Bank","Zhejiang Jingning Ginza Rural Bank","Zhejiang Mintai Commercial Bank","Zhejiang Sanmen Ginza Rural Bank","Zhejiang Rural Credit Cooperative Union","Zhejiang Tailong Commercial Bank","Zhejiang Commercial Bank","Zhengzhou Bank","Bank of China","CITIC Bank","Central Bank","Zhuhai China Resources Bank"]}]
('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:'title'
},
'customFixed':{
type:Boolean,
default:true
}
}
});
('my-list',{
template:`<div class="content" >
<ul ref="listUser" @touchmove="bMove=true">
<li class="item" v-for="(index,item) in userData">
<p data-index="{{index}}">{{}}</p>
<ul>
<li v-for="bankName in ">{{bankName}}</li>
</ul>
</li>
</ul><div class="list_index" ref="listIndex">
<ul >
<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" 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 ();
}
},methods:{
filterIndex:function(data){
var resultIndex = [];
for(var i=0;i<;i++){
if(data[i].letter){
(data[i].letter);
}
}
return resultIndex;
},setLisIndexPos:function(){
var iH = ('listIndex').offsetHeight;
('listIndex'). = - iH / 2 +"px";
},setScroll:function(letter){
var el = ?:;
var aP = ('p');
var aLi = ('list_index').getElementsByTagName('li');
for(var i=0;i<;i++){
if(aP[i].() == ()){
= aP[i].offsetTop;
for(var j=0;j<;j++){
if(aLi[j].getAttribute('data-index')==i){
= i;
}
}
}
}
},showBigLetter:function(letter){
var that = this;
= true;
if(){
= letter;
setTimeout(function(){
= false;
},1000)
}
},handleScroll:function(){ // When listening to scroll, set the style of the letter var that = this;
var aP = ('p');
var scroll = ||;
for(var i=1;i<;i++){
if(aP[i].offsetTop<scroll) {
= i; //Set the style of the current letter if(aP[i+1].offsetTop-scroll<0){
(aP[i+1].innerHTML);
}
}
}
}
},ready : function(){
();
(function(doc, win) {
var docEl = ,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = ;
if (!clientWidth) return;
= 20 * (clientWidth / 320) + 'px';
};
if (!) return;
(resizeEvt, recalc, false);
('DOMContentLoaded', recalc, false);
})(document, window);
('scroll', )
}
});
var Vm = new Vue({
el:"#app",
data:{
userData:userData
},methods:{
}
});
/*Dynamic creation of alert components, development of vue-based js plug-in*/
var myAlert = (function(){
var defaults = {
title:'Popular window',
body:'',
confirm:'',
cancel:''
};
var alertEl = {
template:`<div >
<div class="alert_content">
<div class="alert_title">{{alertTitle}}</div>
<div class="alert_tel" >{{alertTel}}</div>
<div class="alert_btn">
<button v-if="confirm" @touchstart="confirm">Sure</button>
<button v-if="cancel" @touchstart="cancel">Cancel</button>
</div>
</div>
</div>`
}
var myComponent = (alertEl);
return function(opts){
for(var attr in opts){
defaults[attr] = opts[attr];
}
var vm = new myComponent({
el:('div'),
data:{
alertTitle:,
alertTel:,
confirm:,
cancel:
}
})
(vm.$el);
}
})();
/*Dynamic creation of alert components, development of vue-based js plug-in*/
var myLetter = (function(){
var defaults = {
showLetter:''
};
var alertEl = {
template:`<div class="showLetter" >
<div class="letter">{{showLetter}}</div>
</div>`
}
var myComponent = (alertEl);
return function(opts){
for(var attr in opts){
defaults[attr] = opts[attr];
}
var vm = new myComponent({
el:('div'),
data:{
showLetter:,
}
})
(vm.$el);
}
})();
</script>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.