幽灵资源网 Design By www.bzswh.com
今天做到了一个联系人列表的需求, 要求和微信的一样! 写出来分享给大家, 使用了jq和doT模版引擎
首先对数据源进行数据排序
// 数据排序
function sortData(data) {
var letterArr = [];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data.length; j++) {
if (data[i].flag < data[j].flag) {
var temp = data[i];
data[i] = data[j];
data[j] = temp;
}
}
}
if (f_check_uppercase(data[0].flag)) {
letterArr.push(data[0].flag)
} else {
letterArr.push('#')
}
for (var i = 0; i < data.length; i++) {
if(f_check_uppercase(data[0].flag)) {
data[0].flagLetter = data[0].flag
} else {
data[0].flagLetter = '#'
}
if (i>0) {
if (data[i].flag !== data[i-1].flag) {
if (f_check_uppercase(data[i].flag)) {
data[i].flagLetter = data[i].flag;
letterArr.push(data[i].flag)
} else {
data[i].flagLetter = '#';
letterArr.push('#')
}
}
}
}
// 侧边栏
var str = '' ;
for (var i = 0; i < letterArr.length; i++) {
str += '<a ontouchstart="anchorJump(this)" >'+ letterArr[i] +'</a>'
}
$('.slidePage div').html(str)
$('.resultList').html(doT.template($('#listT').text())(data))
}
// 判断是否是字母
function f_check_uppercase(obj) {
if (/[A-Z]/.test(obj)) {
return true;
}
return false;
}
然后是跳转锚点
location.hash = '#id' 和a标签的作用相同, 跳转到指定锚点
// 跳转锚点
function anchorJump(n) {
var text = $(n).text();
if (text.length < 2) {
$('.letter').text(text)
$('.letter').css({'opacity':' 1'})
location.hash = '#' + text
}
}
手指滑动, 页面跳转
// 手指滑动
function move() {
// 阻止默认事件, 页面滑动
event.preventDefault();
anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY))
}
document.elementFromPoint(x,y) 获取指定坐标的顶层元素
最后滑动结束, 手指离开屏幕
// 滑动结束
function touchEnd() {
var opcityNum = 1;
setInterval(function () {
opcityNum -= 0.1;
if (opcityNum > 0) {
$('.letter').css({'opacity': opcityNum})
} else {
clearInterval();
}
},50)
}
点击每条数据
// 点击事件
function clickInfo(ele) {
alert($(ele).find('.name').text())
}
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对的支持!
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
