会员权益
This commit is contained in:
390
uni_modules/zebra-swiper/modules/scrollbar/scrollbar.js
Normal file
390
uni_modules/zebra-swiper/modules/scrollbar/scrollbar.js
Normal file
@@ -0,0 +1,390 @@
|
||||
import {
|
||||
nextTick
|
||||
} from '../../shared/utils.js';
|
||||
|
||||
export default function Scrollbar({
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
}) {
|
||||
|
||||
let isTouched = false;
|
||||
let timeout = null;
|
||||
let dragTimeout = null;
|
||||
let dragStartPos;
|
||||
let dragSize;
|
||||
let trackSize;
|
||||
let divider;
|
||||
|
||||
extendParams({
|
||||
scrollbar: {
|
||||
el: null,
|
||||
dragSize: 'auto',
|
||||
hide: false,
|
||||
draggable: false,
|
||||
snapOnRelease: true,
|
||||
lockClass: 'swiper-scrollbar-lock',
|
||||
dragClass: 'swiper-scrollbar-drag',
|
||||
},
|
||||
});
|
||||
|
||||
swiper.scrollbar = {
|
||||
el: null,
|
||||
dragEl: null,
|
||||
$el: null,
|
||||
$dragEl: null,
|
||||
};
|
||||
|
||||
function setTranslate() {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
const {
|
||||
scrollbar,
|
||||
rtlTranslate: rtl,
|
||||
progress
|
||||
} = swiper;
|
||||
const params = swiper.params.scrollbar;
|
||||
|
||||
let newSize = dragSize;
|
||||
let newPos = (trackSize - dragSize) * progress;
|
||||
if (rtl) {
|
||||
newPos = -newPos;
|
||||
if (newPos > 0) {
|
||||
newSize = dragSize - newPos;
|
||||
newPos = 0;
|
||||
} else if (-newPos + dragSize > trackSize) {
|
||||
newSize = trackSize + newPos;
|
||||
}
|
||||
} else if (newPos < 0) {
|
||||
newSize = dragSize + newPos;
|
||||
newPos = 0;
|
||||
} else if (newPos + dragSize > trackSize) {
|
||||
newSize = trackSize - newPos;
|
||||
}
|
||||
if (swiper.isHorizontal()) {
|
||||
swiper.$wrapperEl.scrollbarItemTransform(`translate3d(${newPos}px, 0, 0)`);
|
||||
swiper.$wrapperEl.scrollbarItemCss({
|
||||
width: `${newSize}px`
|
||||
})
|
||||
} else {
|
||||
swiper.$wrapperEl.scrollbarItemTransform(`translate3d(0px, ${newPos}px, 0)`);
|
||||
swiper.$wrapperEl.scrollbarItemCss({
|
||||
height: `${newSize}px`
|
||||
})
|
||||
}
|
||||
if (params.hide) {
|
||||
clearTimeout(timeout);
|
||||
swiper.$wrapperEl.scrollbarCss({
|
||||
opacity: 1
|
||||
})
|
||||
timeout = setTimeout(() => {
|
||||
swiper.$wrapperEl.scrollbarCss({
|
||||
opacity: 0
|
||||
})
|
||||
swiper.$wrapperEl.scrollbarTransition(400)
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function setTransition(duration) {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
swiper.$wrapperEl.scrollbarItemTransition(duration);
|
||||
}
|
||||
|
||||
async function updateSize() {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
|
||||
const {
|
||||
scrollbar
|
||||
} = swiper;
|
||||
const {
|
||||
$el,
|
||||
methods
|
||||
} = scrollbar;
|
||||
|
||||
swiper.$wrapperEl.scrollbarItemCss({
|
||||
width: '',
|
||||
height: ''
|
||||
})
|
||||
let rectInfo = await swiper.native.getRectScrollbar();
|
||||
|
||||
methods.offset = function() {
|
||||
return rectInfo;
|
||||
}
|
||||
trackSize = swiper.isHorizontal() ? rectInfo.width : rectInfo.height;
|
||||
|
||||
divider =
|
||||
swiper.size /
|
||||
(swiper.virtualSize +
|
||||
swiper.params.slidesOffsetBefore -
|
||||
(swiper.params.centeredSlides ? swiper.snapGrid[0] : 0));
|
||||
if (swiper.params.scrollbar.dragSize === 'auto') {
|
||||
dragSize = trackSize * divider;
|
||||
} else {
|
||||
dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);
|
||||
}
|
||||
|
||||
if (swiper.isHorizontal()) {
|
||||
swiper.$wrapperEl.scrollbarItemCss({
|
||||
width: `${dragSize}px`
|
||||
})
|
||||
} else {
|
||||
swiper.$wrapperEl.scrollbarItemCss({
|
||||
height: `${dragSize}px`
|
||||
})
|
||||
}
|
||||
|
||||
if (divider >= 1) {
|
||||
swiper.$wrapperEl.scrollbarCss({
|
||||
display: 'none'
|
||||
})
|
||||
} else {
|
||||
swiper.$wrapperEl.scrollbarCss({
|
||||
display: ''
|
||||
})
|
||||
}
|
||||
if (swiper.params.scrollbar.hide) {
|
||||
swiper.$wrapperEl.scrollbarCss({
|
||||
opacity: 0
|
||||
})
|
||||
}
|
||||
|
||||
if (swiper.params.watchOverflow && swiper.enabled) {
|
||||
swiper.$wrapperEl[swiper.isLocked ? 'addScrollbarClass' : 'removeScrollbarClass'](
|
||||
swiper.params.scrollbar.lockClass,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getPointerPosition(e) {
|
||||
if (swiper.isHorizontal()) {
|
||||
return e.type === 'touchstart' || e.type === 'touchmove' || 'touchStart' || e.type === 'touchMove' ?
|
||||
e.touches[0].clientX :
|
||||
e.clientX;
|
||||
}
|
||||
return e.type === 'touchstart' || e.type === 'touchmove' ?
|
||||
e.touches[0].clientY :
|
||||
e.clientY;
|
||||
}
|
||||
|
||||
function setDragPosition(e) {
|
||||
const {
|
||||
scrollbar,
|
||||
rtlTranslate: rtl
|
||||
} = swiper;
|
||||
const {
|
||||
$el,
|
||||
methods
|
||||
} = scrollbar;
|
||||
|
||||
let positionRatio;
|
||||
positionRatio =
|
||||
(getPointerPosition(e) -
|
||||
methods.offset()[swiper.isHorizontal() ? 'left' : 'top'] -
|
||||
(dragStartPos !== null ? dragStartPos : dragSize / 2)) /
|
||||
(trackSize - dragSize);
|
||||
positionRatio = Math.max(Math.min(positionRatio, 1), 0);
|
||||
if (rtl) {
|
||||
positionRatio = 1 - positionRatio;
|
||||
}
|
||||
|
||||
const position =
|
||||
swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;
|
||||
|
||||
swiper.updateProgress(position);
|
||||
swiper.setTranslate(position);
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
}
|
||||
|
||||
function onDragStart(_s, e) {
|
||||
const params = swiper.params.scrollbar;
|
||||
const {
|
||||
scrollbar,
|
||||
$wrapperEl
|
||||
} = swiper;
|
||||
isTouched = true;
|
||||
dragStartPos =
|
||||
// e.target ===
|
||||
// $dragEl[0] || e.target === $dragEl ?
|
||||
// getPointerPosition(e) -
|
||||
// e.target.getBoundingClientRect()[swiper.isHorizontal() ? 'left' : 'top'] :
|
||||
null;
|
||||
// e.preventDefault();
|
||||
// e.stopPropagation();
|
||||
|
||||
$wrapperEl.transition(100);
|
||||
swiper.$wrapperEl.scrollbarItemTransition(100)
|
||||
// $dragEl.transition(100);
|
||||
setDragPosition(e);
|
||||
|
||||
clearTimeout(dragTimeout);
|
||||
swiper.$wrapperEl.scrollbarTransition(0)
|
||||
if (params.hide) {
|
||||
swiper.$wrapperEl.scrollbarCss({
|
||||
opacity: 1
|
||||
})
|
||||
}
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.$wrapperEl.css({
|
||||
'scroll-snap-type': 'none'
|
||||
});
|
||||
}
|
||||
emit('scrollbarDragStart', e);
|
||||
}
|
||||
|
||||
function onDragMove(_s, e) {
|
||||
const {
|
||||
scrollbar,
|
||||
$wrapperEl
|
||||
} = swiper;
|
||||
|
||||
if (!isTouched) return;
|
||||
setDragPosition(e);
|
||||
$wrapperEl.transition(0);
|
||||
swiper.$wrapperEl.scrollbarTransition(0)
|
||||
swiper.$wrapperEl.scrollbarItemTransition(0)
|
||||
emit('scrollbarDragMove', e);
|
||||
}
|
||||
|
||||
function onDragEnd(_s, e) {
|
||||
const params = swiper.params.scrollbar;
|
||||
const {
|
||||
scrollbar,
|
||||
$wrapperEl
|
||||
} = swiper;
|
||||
const {
|
||||
$el
|
||||
} = scrollbar;
|
||||
|
||||
if (!isTouched) return;
|
||||
isTouched = false;
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.$wrapperEl.css({
|
||||
'scroll-snap-type': ''
|
||||
});
|
||||
$wrapperEl.transition('');
|
||||
}
|
||||
if (params.hide) {
|
||||
clearTimeout(dragTimeout);
|
||||
dragTimeout = nextTick(() => {
|
||||
swiper.$wrapperEl.scrollbarCss({
|
||||
opacity: 0
|
||||
})
|
||||
swiper.$wrapperEl.scrollbarTransition(400)
|
||||
}, 1000);
|
||||
}
|
||||
emit('scrollbarDragEnd', e);
|
||||
if (params.snapOnRelease) {
|
||||
swiper.slideToClosest();
|
||||
}
|
||||
}
|
||||
|
||||
function events(method) {
|
||||
const {
|
||||
scrollbar,
|
||||
touchEventsTouch,
|
||||
touchEventsDesktop,
|
||||
params,
|
||||
support
|
||||
} = swiper;
|
||||
const $el = scrollbar.$el;
|
||||
const target = $el;
|
||||
const activeListener =
|
||||
support.passiveListener && params.passiveListeners ? {
|
||||
passive: false,
|
||||
capture: false
|
||||
} :
|
||||
false;
|
||||
const passiveListener =
|
||||
support.passiveListener && params.passiveListeners ? {
|
||||
passive: true,
|
||||
capture: false
|
||||
} :
|
||||
false;
|
||||
if (!target) return;
|
||||
const eventMethod = method === 'on' ? 'on' : 'off';
|
||||
if (!support.touch) {
|
||||
swiper[eventMethod]('touchStartScrollbar', onDragStart, activeListener);
|
||||
swiper[eventMethod]('touchMoveScrollbar', onDragMove, activeListener);
|
||||
swiper[eventMethod]('touchEndScrollbar', onDragEnd, passiveListener);
|
||||
} else {
|
||||
swiper[eventMethod]('touchStartScrollbar', onDragStart, activeListener);
|
||||
swiper[eventMethod]('touchMoveScrollbar', onDragMove, activeListener);
|
||||
swiper[eventMethod]('touchEndScrollbar', onDragEnd, passiveListener);
|
||||
}
|
||||
}
|
||||
|
||||
function enableDraggable() {
|
||||
if (!swiper.params.scrollbar.el) return;
|
||||
events('on');
|
||||
}
|
||||
|
||||
function disableDraggable() {
|
||||
if (!swiper.params.scrollbar.el) return;
|
||||
events('off');
|
||||
}
|
||||
|
||||
function init() {
|
||||
const {
|
||||
scrollbar,
|
||||
} = swiper;
|
||||
const params = swiper.params.scrollbar;
|
||||
if (!params.el) return;
|
||||
// swiper.native.updateData({
|
||||
// scrollbarShow: true
|
||||
// })
|
||||
let $el = params.el;
|
||||
|
||||
Object.assign(scrollbar, {
|
||||
$el,
|
||||
el: $el,
|
||||
methods: {}
|
||||
});
|
||||
|
||||
if (params.draggable) {
|
||||
enableDraggable();
|
||||
}
|
||||
|
||||
swiper.$wrapperEl[swiper.enabled ? 'removeScrollbarClass' : 'addScrollbarClass'](swiper.params.scrollbar
|
||||
.lockClass);
|
||||
return true;
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
disableDraggable();
|
||||
}
|
||||
|
||||
on('init', async () => {
|
||||
await init();
|
||||
updateSize();
|
||||
setTranslate();
|
||||
});
|
||||
on('update resize observerUpdate lock unlock', () => {
|
||||
updateSize();
|
||||
});
|
||||
on('setTranslate', () => {
|
||||
setTranslate();
|
||||
});
|
||||
on('setTransition', (_s, duration) => {
|
||||
setTransition(duration);
|
||||
});
|
||||
on('enable disable', () => {
|
||||
const {
|
||||
$el
|
||||
} = swiper.scrollbar;
|
||||
if ($el) {
|
||||
$el[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.scrollbar.lockClass);
|
||||
}
|
||||
});
|
||||
on('destroy', () => {
|
||||
destroy();
|
||||
});
|
||||
|
||||
Object.assign(swiper.scrollbar, {
|
||||
updateSize,
|
||||
setTranslate,
|
||||
init,
|
||||
destroy,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user