如何做一个简单的移动端页面的翻页?

作者 : 开心源码 本文共1530个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共99人阅读

第一步:创立手机端页面内 HTML + CSS 【注】可使用弹性布局 但需要注意的是 外层盒子的定位

第二步: 思考问题 要实现怎么的效果?

1. 手指滑动时触发事件【左右】两个方向

2.点击footer部分的下标实现切换效果

3.点击footer部分的下标实现下标颜色变化

第三步;编写JS代码

增加监听事件

document.addEventListener('DOMContentLoaded',function(){

创立一个数组使用于调使用数组属性值 或者者 方便【数值】的更改

【注】能使用数组 /对象 但对象更方便我们的用

var postion = {

startX:0,

startY:0,

endX:0,

endY:0,

baseMoveX: window.innerHeight / 3,

index:1

}

获取页面元素 比不可少的一个步骤

var tab2 = document.getElementsByClassName('tab2')[0];//获取到ul 思路: 使用ul定位来实现页面的切换 (ul的宽度设置成 innerWind * 4)

var li2 = document.getElementsByClassName('li2');//索引值不确定 且不写先

var tab3 = document.querySelector('#tab3');

var li3 = document.querySelectorAll('.li3');

li3[0].style.color = '#58bc58';//设置默认的第一个下标的颜色

封装一个函数使用于清空下标 的颜色

function delite(){

for(var i = 0;i < li3.length; i++){

li3[i].style.color = '';

}

}

手指事件

【注】 这里的原理和拖拽一抹一样 (手指按下和 手指移动是 时 必需给给记录 光标位置)

手指移动到位置上时候触发 记录鼠标移动坐标

tab2.addEventListener('touchstart',function(e){

postion.startX = e.touches[0].clientX;

postion.startY = e.touches[0].clientY;

})

手指移动位置胡时候触发 记录鼠标移动坐标

tab2.addEventListener('touchmove',function(en){

postion.endX = en.touches[0].clientX;

postion.endY = en.touches[0].clientY;

move();//当手指滑动时触发函数 改变ul的定位

})

手指移开的时候定位

tab2.addEventListener('touchend',function(vent){

move(true);//手指松开时调使用调使用函(函数使用于判断 :滑动的距离能否超过绝对值 1.超过 (滑动到下一页) 2.不超过 (位置定位在当前页))

})

function move(_end){

var x = postion.startX – postion.endX;

var y = postion.startY – postion.endY;

滑动效果

if(postion.index < li2.length){//第一种情况==========left [使用if 判断:索引值是 1-3的时候能 向左滑动 改变 ul的定位 【注】由于超出会造成使用户滑动出现空白页面 ]

if(x > 0){//计算公式: 起点位置 – 终点位置 = x; 假如 x > 0 说明滑动的方向是左边

//to left

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 如何做一个简单的移动端页面的翻页?

发表回复