turnjs怎么设置翻页事件触发范围 ?-灵析社区

加班使我熟睡

先上结论:没有现成的 API,但可以手写一个点击监听。如容器元素 `width: 100px`,点击时判断其点击位置 `x` 轴位置,`x { let isLevelShift = false; let startX = 0; let startY = 0; $target .on( 'touchmove', '.book-case-item-content', e => { if (isLevelShift) { return; } e.stopPropagation(); } ) .parent() .on('touchstart', e => { isLevelShift = true; startX = e.originalEvent.changedTouches[0] .clientX; startY = e.originalEvent.changedTouches[0] .clientY; }) .on('touchmove', e => { if (!isLevelShift) { return; } const x = e.originalEvent.changedTouches[0] .clientX; const y = e.originalEvent.changedTouches[0] .clientY; // 对比 X 轴与 Y 轴偏移量,判断该操作是否为水平滑动 if ( Math.abs(y - startY) > Math.abs(x - startX) ) { isLevelShift = false; return; } const offset = e.target.clientWidth / 4; if (x - startX > offset) { $book.turn('previous'); isLevelShift = false; } if (startX - x > offset) { $book.turn('next'); isLevelShift = false; } }) .on('touchend', () => { isLevelShift = false; }); }; * * * 更新: 一个简易的 Demo: $("#magazine") .turn({ display: "single", acceleration: true, gradients: !$.isTouch, elevation: 50, when: { turned: function (e, page) { /*console.log('Current view: ', $(this).turn('view'));*/ }, }, }) .turn("disable", true) .on("click", function (event) { $(this) .turn("disable", false) .turn(event.offsetX >> 1 ? "previous" : "next") .turn("disable", true); });

阅读量:1

点赞量:0

问AI