index.sjs 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. const getWidth = (rightWidth, leftWidth, inertiaWidth) => {
  2. const num = (rightWidth || leftWidth) * 2 + inertiaWidth;
  3. const width = rightWidth > leftWidth ? rightWidth : leftWidth;
  4. return rightWidth && leftWidth ? `calc(100% + ${width + inertiaWidth}px)` : `calc(100% + ${num / 2}px)`;
  5. };
  6. const getMarginLeft = (rightWidth, leftWidth, inertiaWidth) => {
  7. const width = rightWidth > leftWidth ? rightWidth : leftWidth;
  8. return `calc(-${(width + inertiaWidth) / 2}px)`;
  9. };
  10. const getSlotWidthStyle = (rightWidth, leftWidth, left = [], right = [], inertiaWidth) => {
  11. // 右
  12. if (right.length > 0 && left.length === 0) {
  13. return `calc(100% - ${(1 + inertiaWidth) / 2}px)`;
  14. }
  15. // 左
  16. if (left.length > 0 && right.length === 0) {
  17. return { width : `calc(100% - ${(leftWidth) / 2}px)`, marginLeft: (leftWidth + inertiaWidth) / 2 + 'px' };
  18. }
  19. if (left.length > 0 && right.length > 0) {
  20. return { width : `100%`, marginLeft: `0` };
  21. }
  22. };
  23. const getLeft = (tapType, idx, right, isLeft) => {
  24. const tip = !isLeft ? 'L-' : 'R-';
  25. if (right.length === 1) {
  26. return tapType && tapType === `${tip}${idx}` ? 'text-move-midd' : '';
  27. }
  28. if (right.length === 3 && idx === 1) {
  29. return tapType && tapType === `${tip}${idx}` ? 'text-move-midd' : '';
  30. }
  31. let cls = '';
  32. if (idx === 0) {
  33. cls = isLeft ? 'text-move-left' : 'text-move-right';
  34. } else {
  35. cls = isLeft ? 'text-move-right' : 'text-move-left';
  36. }
  37. return tapType && tapType === `${tip}${idx}` ? cls : '';
  38. }
  39. const getWidth2 = (rightWidth, leftWidth, inertiaWidth) => {
  40. const width = rightWidth > leftWidth ? rightWidth : leftWidth;
  41. return rightWidth && leftWidth ? `calc(100% - ${width + inertiaWidth}px)` : `calc(100% - ${(width + inertiaWidth) / 2}px)`;
  42. };
  43. const getMarginLeft2 = (rightWidth, leftWidth, inertiaWidth) => {
  44. const num = rightWidth > 0 ? inertiaWidth : 0;
  45. const width = rightWidth > leftWidth ? rightWidth : leftWidth;
  46. return leftWidth && rightWidth ? `${(width + num) / 2}px` : (leftWidth > 0 ? 0 : `${(width + inertiaWidth) / 2}px`);
  47. };
  48. const getMarginLeft3 = (rightWidth, leftWidth, inertiaWidth) => {
  49. const width = rightWidth > leftWidth ? rightWidth : leftWidth;
  50. return leftWidth && rightWidth ? `calc(100% - ${(width + inertiaWidth) / 2}px)` : `calc(100% - ${(rightWidth) / 2 - 1}px)`;
  51. };
  52. const getMoveX = (rightButtons, idx) => {
  53. const arr = rightButtons.slice(idx, rightButtons.length);
  54. return arr.reduce((tolal, cur) => { return parseFloat(tolal) + cur.width }, 0);
  55. };
  56. export default {
  57. getWidth2,
  58. getMarginLeft2,
  59. getMarginLeft3,
  60. getLeft,
  61. getWidth,
  62. getSlotWidthStyle,
  63. getMarginLeft,
  64. getMoveX,
  65. };