wd-swiper.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. if (!Math) {
  4. wdSwiperNav();
  5. }
  6. const wdSwiperNav = () => "../wd-swiper-nav/wd-swiper-nav.js";
  7. const __default__ = {
  8. name: "wd-swiper",
  9. options: {
  10. addGlobalClass: true,
  11. virtualHost: true,
  12. styleIsolation: "shared"
  13. }
  14. };
  15. const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
  16. ...__default__,
  17. props: common_vendor.swiperProps,
  18. emits: ["click", "change", "animationfinish", "update:current"],
  19. setup(__props, { emit: __emit }) {
  20. const props = __props;
  21. const emit = __emit;
  22. const navCurrent = common_vendor.ref(props.current);
  23. const currentValue = common_vendor.ref(props.current);
  24. const updateCurrent = (current, force = false) => {
  25. currentValue.value = current;
  26. if (force) {
  27. navCurrent.value = current;
  28. }
  29. emit("update:current", current);
  30. };
  31. const videoPlaying = common_vendor.ref(false);
  32. const { proxy } = common_vendor.getCurrentInstance();
  33. const uid = common_vendor.ref(common_vendor.uuid());
  34. common_vendor.watch(
  35. () => props.current,
  36. (val) => {
  37. if (val < 0) {
  38. props.loop ? goToEnd() : goToStart();
  39. } else if (val >= props.list.length) {
  40. props.loop ? goToStart() : goToEnd();
  41. } else {
  42. navTo(val);
  43. }
  44. }
  45. );
  46. const swiperIndicator = common_vendor.computed(() => {
  47. const { list, direction, indicatorPosition, indicator } = props;
  48. const swiperIndicator2 = {
  49. current: currentValue.value || 0,
  50. total: list.length || 0,
  51. direction: direction || "horizontal",
  52. indicatorPosition: indicatorPosition || "bottom"
  53. };
  54. if (common_vendor.isObj(indicator)) {
  55. swiperIndicator2.type = indicator.type || "dots";
  56. swiperIndicator2.minShowNum = indicator.minShowNum || 2;
  57. swiperIndicator2.showControls = indicator.showControls || false;
  58. }
  59. return swiperIndicator2;
  60. });
  61. const getMediaType = (item, type) => {
  62. const checkType = (url) => common_vendor.isVideoUrl(url);
  63. if (common_vendor.isObj(item)) {
  64. return item.type && ["video", "image"].includes(item.type) ? item.type === type : checkType(item[props.valueKey]);
  65. } else {
  66. return checkType(item);
  67. }
  68. };
  69. const isVideo = (item) => {
  70. return getMediaType(item, "video");
  71. };
  72. function navTo(index) {
  73. if (index === currentValue.value)
  74. return;
  75. updateCurrent(index, true);
  76. }
  77. function goToStart() {
  78. navTo(0);
  79. }
  80. function goToEnd() {
  81. navTo(props.list.length - 1);
  82. }
  83. function handleVideoPaly() {
  84. props.stopAutoplayWhenVideoPlay && (videoPlaying.value = true);
  85. }
  86. function handleVideoPause() {
  87. videoPlaying.value = false;
  88. }
  89. function isPrev(current, index, list) {
  90. return (current - 1 + list.length) % list.length === index;
  91. }
  92. function isNext(current, index, list) {
  93. return (current + 1 + list.length) % list.length === index;
  94. }
  95. function getCustomItemClass(current, index, list) {
  96. let customItemClass = "";
  97. if (isPrev(current, index, list)) {
  98. customItemClass = props.customPrevClass || props.customPrevImageClass;
  99. }
  100. if (isNext(current, index, list)) {
  101. customItemClass = props.customNextClass || props.customNextImageClass;
  102. }
  103. return customItemClass;
  104. }
  105. function handleChange(e) {
  106. const { current, source } = e.detail;
  107. const previous = currentValue.value;
  108. emit("change", { current, source });
  109. if (current !== currentValue.value) {
  110. const forceUpdate = source === "autoplay" || source === "touch";
  111. updateCurrent(current, forceUpdate);
  112. }
  113. handleVideoChange(previous, current);
  114. }
  115. function handleVideoChange(previous, current) {
  116. handleStopVideoPaly(previous);
  117. handleStartVideoPaly(current);
  118. }
  119. function handleStartVideoPaly(index) {
  120. if (props.autoplayVideo) {
  121. const currentItem = props.list[index];
  122. if (common_vendor.isDef(currentItem) && isVideo(currentItem)) {
  123. const video = common_vendor.index.createVideoContext(`video-${index}-${uid.value}`, proxy);
  124. video.play();
  125. }
  126. }
  127. }
  128. function handleStopVideoPaly(index) {
  129. if (props.stopPreviousVideo) {
  130. const previousItem = props.list[index];
  131. if (common_vendor.isDef(previousItem) && isVideo(previousItem)) {
  132. const video = common_vendor.index.createVideoContext(`video-${index}-${uid.value}`, proxy);
  133. video.pause();
  134. }
  135. } else if (props.stopAutoplayWhenVideoPlay) {
  136. handleVideoPause();
  137. }
  138. }
  139. function handleAnimationfinish(e) {
  140. const { current, source } = e.detail;
  141. if (current !== currentValue.value) {
  142. const forceUpdate = source === "autoplay" || source === "touch";
  143. updateCurrent(current, forceUpdate);
  144. }
  145. emit("animationfinish", { current, source });
  146. }
  147. function handleClick(index, item) {
  148. emit("click", { index, item });
  149. }
  150. function handleIndicatorChange({ dir }) {
  151. const { list, loop } = props;
  152. const total = list.length;
  153. let nextPos = dir === "next" ? currentValue.value + 1 : currentValue.value - 1;
  154. if (loop) {
  155. nextPos = dir === "next" ? (currentValue.value + 1) % total : (currentValue.value - 1 + total) % total;
  156. } else {
  157. nextPos = nextPos < 0 || nextPos >= total ? currentValue.value : nextPos;
  158. }
  159. if (nextPos === currentValue.value)
  160. return;
  161. navTo(nextPos);
  162. }
  163. return (_ctx, _cache) => {
  164. return common_vendor.e({
  165. a: common_vendor.f(_ctx.list, (item, index, i0) => {
  166. return common_vendor.e({
  167. a: isVideo(item)
  168. }, isVideo(item) ? {
  169. b: `video-${index}-${uid.value}`,
  170. c: common_vendor.unref(common_vendor.addUnit)(_ctx.height),
  171. d: common_vendor.unref(common_vendor.isObj)(item) ? item[_ctx.valueKey] : item,
  172. e: common_vendor.unref(common_vendor.isObj)(item) ? item.poster : "",
  173. f: common_vendor.n(`wd-swiper__video ${_ctx.customItemClass} ${getCustomItemClass(currentValue.value, index, _ctx.list)}`),
  174. g: common_vendor.o(handleVideoPaly, index),
  175. h: common_vendor.o(handleVideoPause, index),
  176. i: _ctx.videoLoop,
  177. j: _ctx.muted,
  178. k: _ctx.autoplayVideo,
  179. l: common_vendor.o(($event) => handleClick(index, item), index)
  180. } : {
  181. m: common_vendor.unref(common_vendor.isObj)(item) ? item[_ctx.valueKey] : item,
  182. n: common_vendor.n(`wd-swiper__image ${_ctx.customImageClass} ${_ctx.customItemClass} ${getCustomItemClass(currentValue.value, index, _ctx.list)}`),
  183. o: common_vendor.unref(common_vendor.addUnit)(_ctx.height),
  184. p: _ctx.imageMode,
  185. q: common_vendor.o(($event) => handleClick(index, item), index)
  186. }, {
  187. r: common_vendor.unref(common_vendor.isObj)(item) && item[_ctx.textKey]
  188. }, common_vendor.unref(common_vendor.isObj)(item) && item[_ctx.textKey] ? {
  189. s: common_vendor.t(item[_ctx.textKey]),
  190. t: common_vendor.n(`wd-swiper__text ${_ctx.customTextClass}`),
  191. v: common_vendor.s(_ctx.customTextStyle)
  192. } : {}, {
  193. w: index
  194. });
  195. }),
  196. b: _ctx.adjustHeight,
  197. c: _ctx.adjustVerticalHeight,
  198. d: _ctx.autoplay && !videoPlaying.value,
  199. e: navCurrent.value,
  200. f: _ctx.interval,
  201. g: _ctx.duration,
  202. h: _ctx.loop,
  203. i: _ctx.direction == "vertical",
  204. j: _ctx.easingFunction,
  205. k: common_vendor.unref(common_vendor.addUnit)(_ctx.previousMargin),
  206. l: common_vendor.unref(common_vendor.addUnit)(_ctx.nextMargin),
  207. m: _ctx.snapToEdge,
  208. n: _ctx.displayMultipleItems,
  209. o: common_vendor.unref(common_vendor.addUnit)(_ctx.height),
  210. p: common_vendor.o(handleChange),
  211. q: common_vendor.o(handleAnimationfinish),
  212. r: _ctx.indicator
  213. }, _ctx.indicator ? common_vendor.e({
  214. s: common_vendor.r("indicator", {
  215. current: currentValue.value,
  216. total: _ctx.list.length
  217. }),
  218. t: !_ctx.$slots.indicator
  219. }, !_ctx.$slots.indicator ? {
  220. v: common_vendor.o(handleIndicatorChange),
  221. w: common_vendor.p({
  222. ["custom-class"]: _ctx.customIndicatorClass,
  223. type: swiperIndicator.value.type,
  224. current: swiperIndicator.value.current,
  225. total: swiperIndicator.value.total,
  226. direction: swiperIndicator.value.direction,
  227. ["indicator-position"]: swiperIndicator.value.indicatorPosition,
  228. ["min-show-num"]: swiperIndicator.value.minShowNum,
  229. ["show-controls"]: swiperIndicator.value.showControls
  230. })
  231. } : {}) : {}, {
  232. x: common_vendor.n(`wd-swiper ${_ctx.customClass}`),
  233. y: common_vendor.s(_ctx.customStyle)
  234. });
  235. };
  236. }
  237. });
  238. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-6e972027"]]);
  239. wx.createComponent(Component);