Swiper中文论坛

标题: 急：PC端前两页整屏滑动，第三页起鼠标滚动，怎么实现啊。 [打印本页]

作者: youtasa 时间: 2018-4-18 23:40
标题: 急：PC端前两页整屏滑动，第三页起鼠标滚动，怎么实现啊。
在线等，谢谢啊谢谢

有项目需求，是PC端，需求是，首页和第二页整屏滚动，到第三页的时候，回归鼠标控制，就是普通的滑动页面。。求问怎么实现啊啊啊。。。。

作者: koyoyoo 时间: 2018-4-19 15:14
var Touch = {
  ts:undefined,
  dir:undefined,
  scrollTop:0,
  onStart : function(evt) {
Touch.ts = evt.originalEvent.touches[0].clientY;
  },
  onMove : function(evt){
var te = evt.originalEvent.changedTouches[0].clientY;
if (Touch.ts > te) {
   Touch.dir = 'slidedown';
} else if (Touch.ts < te) {
   Touch.dir = 'slideup';
}
//检查滚动
var $slide = $(this),
   slideHeight = $slide.height(),
   slideScrollHeight = $slide[0].scrollHeight;

if (slideHeight !== slideScrollHeight) {
   //幻灯片内容溢出
   var scrollTop = $slide.scrollTop();
   if (scrollTop > 0 && (scrollTop + slideHeight) < slideScrollHeight //滚动内容
      ||
      (scrollTop == 0 && Touch.dir == 'slidedown') //从上边缘移动
      ||
      ((scrollTop + slideHeight) == slideScrollHeight && Touch.dir == 'slideup')) { //从下边缘移动
      evt.stopPropagation();
   }
}
  }
}

$('.j-main-swiper').on('touchstart', Touch.onStart);//j-main-swiper是swiper-wrapper外面的那一个div
$('.swiper-slide').on('touchmove', Touch.onMove);//这是子slide

作者: random8899 时间: 2018-4-21 20:01
不错这是子slide

作者: 哈哈哈11111 时间: 2018-4-23 11:21
楼上厉害楼

作者: sydmifan 时间: 2018-4-23 16:58

koyoyoo 发表于 2018-4-19 15:14
var Touch = {
ts:undefined,
dir:undefined,

厉害厉害,刚好要用到,自己又写不出来

作者: 2427635040 时间: 2020-9-10 17:11
有沒有demo，借鉴一下啊。

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)