mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
51 lines (50 loc) • 2.02 kB
TypeScript
import { Props, ListDataItem, USEBtns } from './types';
import { Ref, ComputedRef } from 'vue';
/**
* 实际移动思路: 通过触摸到移动中的距离, 来设置滚动的距离
* 实施:
** 触摸开始时: 记录开始Y坐标和触摸上一次所处的位移值(distance -> translateY)
** 触摸移动中: 通过当前Y坐标减去开始的Y坐标得到拖拽的距离, 然后实际需要移动的值=触摸上一次所处的位移值+拖拽的距离
*/
/**
* 理想移动到目标思路: 通过滚动是否是44（每一个li的固定高度）的倍数, 剩余的是否大于44/2, 大于则补足一个倍数, 小于则取消剩余部分
* 实施: 触摸结束时:
** 剩余数 = 实际需要的位移(distance -> translateY) % 44
** distance = 剩余数>(44/2) ? distance + (44-剩余数): distance - 剩余数;
*/
/**
* 惯性滑动思路: 通过滑动的速度来计算还需要滑动的距离
* 实施:
** 滑动的速度 = 滑动的距离/滑动的时间（触摸开始-触摸结束）.toFixed(2)
** 还需要滑动的距离 = 滑动的速度 * 400
** 滑动的速度 > 0.12 才开启惯性滑动
*/
/**
* 移动列
*/
export declare const useHandMove: (props: Readonly<Required<Props>>) => {
show: Ref<number[], number[]>;
currentValue: number[];
listData: Ref<{
id: number;
list: number | number[];
}[], ListDataItem[] | {
id: number;
list: number | number[];
}[]>;
distance: Ref<number[], number[]>;
duration: Ref<number, number>;
filterNumber: ComputedRef<(num: number) => string | number>;
getCurNum: (id: number, num: number) => number;
onTouchstart: (e: TouchEvent, i: number) => void;
onTouchmove: (e: TouchEvent, i: number) => void;
onTouchend: (e: TouchEvent, i: number) => void;
onMousedown: (e: MouseEvent, i: number) => void;
};
/**
* 按钮
*/
export declare const useBtns: ({ props, emit, currentValue, modelValue }: USEBtns.Option) => {
onCancel: () => void;
onSure: () => void;
};