html怎么切换左右页面,左右滑动切换上下页.html

body{

background: #eee;

width: 100%;

overflow-x: hidden;

}

*,html,body{

margin: 0;

padding: 0;

}

.goods-list{

background: #fff;

/*opacity: 0.5;*/

}

.run{

transition: all 0.5s;

}

.goods-list li{

list-style-type: none;

height: 40px;

line-height: 40px;

padding: 0 15px;

border-bottom: 1px solid #ccc;

}

.text{

z-index: -1;

position: fixed;

top:50%;

transform: translateY(-50%);

width: 100%;

}

.back, .next{

text-align: center;

width: 100px;

position: absolute;

color: #46b1de;

}

.back{

left: 0;

}

.next{

right: 0;

}

.next .icon{

transform: rotate(180deg);

}

.back .icon{

transform: rotate(0deg);

}

上一页

下一页

• 商品列表1
• 商品列表2
• 商品列表3
• 商品列表4
• 商品列表5
• 商品列表6
• 商品列表7
• 商品列表8
• 商品列表9
• 商品列表10
• 商品列表11
• 商品列表12
• 商品列表13
• 商品列表14
• 商品列表15
• 商品列表16
• 商品列表17
• 商品列表18
• 商品列表19
• 商品列表20

let list = document.getElementById("list")

let nextDom = $(".next").find(".iconfont")

let backDom = $(".back").find(".iconfont")

let sx , sy

let isRequire = {

aut : false, //是否应该请求数据

dir : 1 //请求的是上一页的数据还是下一页的数据

};

list.addEventListener("touchstart",function(event){

this.className = "goods-list"

let {clientX:x,clientY:y} = event.touches[0]

sx = x

sy = y

})

list.addEventListener("touchmove",function(event){

let {clientX:x,clientY:y} = event.touches[0]

let mx = x-sx

let my = y-sy

let ax = Math.abs(mx)

let ay = Math.abs(my)

//当前被拖动的值 * 180/100

let deg = ax * 1.8

let adeg = Math.abs(deg)

if(mx < 0){ //此时应该控制下一页中的箭头

if(adeg < 180 ){

nextDom.css("transform",`rotate(${deg}deg)`)

}else{

nextDom.css("transform",`rotate(${180}deg)`)

}

}else{

if(adeg < 180 ){

backDom.css("transform",`rotate(${-adeg}deg)`)

}else{

backDom.css("transform",`rotate(${180}deg)`)

}

}

if(ax/4 > ay){

if(ax < 100){

this.style.transform = `translateX(${mx}px)`

}else{

this.style.transform = `translateX(${mx/ax*100}px)`

//用于记录当用户松开手指时 是否应该发起请求

isRequire.aut = true

//负值代表请求上一页 正值代表请求下一页

isRequire.dir = -mx/ax

}

}

})

list.addEventListener("touchend",function(){

this.className = "goods-list run"

this.style.transform = "translateX(0px)"

if(isRequire.aut){

if(isRequire.dir == -1){

back()

}else{

next()

}

}

isRequire.aut = false

})

list.addEventListener("transitionend",function(){

this.className = "goods-list"

})

function next(){

console.log("开始请求下一页的数据")

}

function back(){

console.log("开始请求上一页的数据")

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史