新县网,nc6000驱动,长泰天柱山
vue实现手机通讯录功能，供大家参考，具体内容如下
我要评论
<!doctype html>
<html>
<head>
<title>动态加载组件</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 id="app">
<!--<my-header custom-title="通讯录" custom-fixed>-->
<!--<button slot="left">返回</button>-->
<!--<button slot="right">主页</button>-->
<!--</my-header>-->
<my-list :user-data="userdata"></my-list>
</div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script>
var userdata = [{"letter":"b","data":["包商银行","北京农村商业银行","北京顺义银座村镇银行","北京银行","渤海银行"]},{"letter":"c","data":["沧州银行","承德银行","重庆农村商业银行","重庆黔江银座村镇银行","重庆银行","重庆渝北银座村镇银行"]},{"letter":"d","data":["大连银行","德州银行","东莞农村商业银行","东亚银行","东营莱商村镇银行","东营银行"]},{"letter":"e","data":["鄂尔多斯银行"]},{"letter":"f","data":["福建海峡银行","福建省农村信用社联合社","阜新银行","富邦华一银行","富滇银行"]},{"letter":"g","data":["赣州银行","工商银行","广东华兴银行","广东南粤银行","广东省农村信用社联合社","广发银行","广西北部湾银行","广西壮族自治区农村信用社联合社","广州农村商业银行","广州银行","桂林银行"]},{"letter":"h","data":["哈尔滨银行","海口联合农村商业银行","韩亚银行","汉口银行","河北银行","恒丰银行","衡水银行","湖北银行","湖州银行","葫芦岛银行","华夏银行","徽商银行"]},{"letter":"j","data":["吉林银行","济宁银行","嘉兴银行","建设银行","江苏银行","江苏长江商业银行","江西赣州银座村镇银行","江西省农村信用社联合社","交通银行","焦作中旅银行","金华银行","锦州银行","晋城银行","晋商银行","九江银行"]},{"letter":"k","data":["昆仑银行","昆山农村商业银行"]},{"letter":"l","data":["莱商银行","兰州银行","廊坊银行","临商银行","柳州银行","龙江银行","洛阳银行"]},{"letter":"m","data":["绵阳市商业银行","民生银行"]},{"letter":"n","data":["南京银行","内蒙古银行","宁波通商银行","宁波银行","宁夏黄河农村商业银行","宁夏银行","农业银行"]},{"letter":"p","data":["攀枝花市商业银行","平安银行","平顶山银行","齐鲁银行","齐商银行","企业银行","青岛银行","青海银行"]},{"letter":"q","data":["泉州银行"]},{"letter":"r","data":["日照银行"]},{"letter":"s","data":["山东省农村信用社联合社","上海银行","上饶银行","绍兴银行","深圳福田银座村镇银行","深圳农村商业银行","深圳前海微众银行","四川省农村信用社联合社","苏州银行"]},{"letter":"t","data":["台州银行","太仓农村商业银行","天津农村商业银行","天津银行"]},{"letter":"w","data":["威海市商业银行","潍坊银行","温州银行","武汉农村商业银行"]},{"letter":"x","data":["西安银行","厦门国际银行","厦门银行","新韩银行","邢台银行","兴业银行"]},{"letter":"y","data":["烟台银行","营口银行","邮政储蓄银行","友利银行"]},{"letter":"z","data":["枣庄银行","张家港农村商业银行","长安银行","长沙银行","招商银行","浙江稠州商业银行","浙江景宁银座村镇银行","浙江民泰商业银行","浙江三门银座村镇银行","浙江省农村信用社联合社","浙江泰隆商业银行","浙商银行","郑州银行","中国银行","中信银行","中原银行","珠海华润银行"]}]
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)
}
},handlescroll:function(){ //监听滚动时，设置字母的样式
var that = this;
var ap = document.getelementsbytagname('p');
var scroll = document.body.scrolltop||document.documentelement.scrolltop;
for(var i=1;i<ap.length;i++){
if(ap[i].offsettop<scroll) {
this.redcolorindex = i; //设置当前字母的样式
if(ap[i+1].offsettop-scroll<0){
that.showbigletter(ap[i+1].innerhtml);
}
}
}
}
},ready : function(){
this.setlisindexpos();
(function(doc, win) {
var docel = doc.documentelement,
resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientwidth = docel.clientwidth;
if (!clientwidth) return;
docel.style.fontsize = 20 * (clientwidth / 320) + 'px';
};
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window);
window.addeventlistener('scroll', this.handlescroll)
}
});
var vm = new vue({
el:"#app",
data:{
userdata:userdata
},methods:{
}
});
/*动态的创建alert组件，基于vue的js插件的开发*/
var myalert = (function(){
var defaults = {
title:'弹窗',
body:'',
confirm:'',
cancel:''
};
var alertel = {
template:`<div id="alert" >
<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">确定</button>
<button v-if="cancel" @touchstart="cancel">取消</button>
</div>
</div>
</div>`
}
var mycomponent = vue.extend(alertel);
return function(opts){
for(var attr in opts){
defaults[attr] = opts[attr];
}
var vm = new mycomponent({
el:document.createelement('div'),
data:{
alerttitle:defaults.title,
alerttel:defaults.body,
confirm:defaults.confirm,
cancel:defaults.cancel
}
})
document.body.appendchild(vm.$el);
}
})();
/*动态的创建alert组件，基于vue的js插件的开发*/
var myletter = (function(){
var defaults = {
showletter:''
};
var alertel = {
template:`<div class="showletter" id="showletter">
<div class="letter">{{showletter}}</div>
</div>`
}
var mycomponent = vue.extend(alertel);
return function(opts){
for(var attr in opts){
defaults[attr] = opts[attr];
}
var vm = new mycomponent({
el:document.createelement('div'),
data:{
showletter:defaults.showletter,
}
})
document.body.appendchild(vm.$el);
}
})();
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论