| 1 |
- {"version":3,"sources":["../src/swiper/swiper.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,cAAc,EAAe,eAAe,EAAc,MAAM,qBAAqB,CAAC;AAoB/F,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;CACtC;AAQD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,cAAc;IAChD,eAAe,WAAuB;IAEtC,OAAO;;MAEL;IAEF,UAAU,iCAAS;IAEnB,SAAS;;;;;;MA6BP;IAEF,QAAQ,MAAQ;IAEhB,IAAI,MAAQ;IAEZ,KAAK,MAAQ;IAEb,WAAW,MAAQ;IAGnB,OAAO,EAAE,eAAe,CAAQ;IAEhC,SAAS;;;;;;;;MAgBP;IAEF,IAAI;;;;;;;;;;;;;;;;;;MAsBF;IAEF,QAAQ;IAaR,QAAQ;IAIR,KAAK;IAeL;;OAEG;IACH,QAAQ;IAWR;;OAEG;IACH,OAAO;IAWP;;OAEG;IACH,MAAM;IAON;;;OAGG;IACH,WAAW;IAaX,IAAI;IAUJ,MAAM;IAKN,KAAK;IAKL;;;;;OAKG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAiBlC;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,KAAA;IAc7B;;;OAGG;IACH,SAAS,CAAC,KAAK,KAAA;IAUf,UAAU,CAAC,KAAK,EAAE,MAAM;;;;;;;IAaxB;;;OAGG;IACH,IAAI,CAAC,GAAG,EAAE,SAAS;IAanB;;;OAGG;IACH,IAAI,CAAC,GAAG,EAAE,SAAS;IAanB;;;OAGG;IACH,oBAAoB,CAAC,CAAC,KAAA;CAKvB","file":"swiper.d.ts","sourcesContent":["/**\n * 轮播组件\n * 因原生swiper受限，基于wxs重新实现，后期可以扩展更多丰富的功能\n * todo：无限循环，3D动效等\n */\nimport { SuperComponent, wxComponent, ControlInstance, useControl } from '../common/src/index';\nimport config from '../common/config';\nimport { DIRECTION, NavTypes } from './common/constants';\nimport props from './props';\n\nconst { prefix } = config;\nconst easings = {\n // 线性动画\n linear: 'linear',\n // 缓入动画\n // https://easings.net/#easeInCubic\n easeInCubic: 'cubic-bezier(0.32, 0, 0.67, 0)',\n // 缓出动画\n // https://easings.net/#easeOutCubic\n easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',\n // 缓入缓出动画\n // https://easings.net/#easeInOutCubic\n easeInOutCubic: 'cubic-bezier(0.65, 0, 0.35, 1)',\n};\n\ninterface SwitchOpt {\n cycle?: boolean;\n source: 'autoplay' | 'touch' | 'nav';\n}\nconst defaultNavigation = {\n type: NavTypes.dots,\n minShowNum: 2,\n hasNavBtn: false,\n};\n\n@wxComponent()\nexport default class Swiper extends SuperComponent {\n externalClasses = [`${prefix}-class`];\n\n options = {\n multipleSlots: true,\n };\n\n properties = props;\n\n observers = {\n navigation(val) {\n this.setData({\n _navigation: { ...defaultNavigation, ...val },\n });\n },\n current(val) {\n this.update(+val);\n },\n autoplay(val) {\n if (val) {\n this.play();\n } else {\n this.pause();\n }\n },\n interval(val) {\n if (this._old_interval && this._old_interval !== val) {\n this.replay();\n }\n this._old_interval = val;\n },\n direction(val) {\n // 属性变化时，重新初始化\n if (this._old_direction && this._old_direction !== val) {\n this.initItem();\n }\n this._old_direction = val;\n },\n };\n\n children = null;\n\n $nav = null;\n\n timer = null;\n\n updateTimer = null;\n\n // 受控属性\n control: ControlInstance = null;\n\n relations = {\n './swiper-item': {\n type: 'child' as 'child',\n linked: function () {\n // 最后一个触发linked，才执行更新\n clearTimeout(this.updateTimer);\n // 若items变化，延迟检查更新\n this.updateTimer = setTimeout(() => {\n this.initItem();\n this.updateNav(this.control.get());\n });\n },\n },\n './swiper-nav': {\n type: 'child' as 'child',\n },\n };\n\n data = {\n // 内部状态：当前临时索引\n _current: 0,\n // 内部取默认值后的配置\n _navigation: null,\n // 容器宽\n _width: 0,\n // 容器高\n _height: 0,\n offsetX: 0,\n // todo\n offsetY: 0,\n // 列表项总数\n total: 0,\n\n easings,\n // js和wxs等初始化就绪\n inited: false,\n // current初始化的值就绪\n currentInited: false,\n prefix,\n classPrefix: `.${prefix}-swiper`,\n };\n\n attached() {\n // 暂停完全受控模式，待TD全量支持受控后，再开启\n // this.control = useControl.call(this, {\n // valueKey: 'current',\n // defaultValueKey: 'defaultCurrent',\n // });\n // 启用半受控模式\n this.control = useControl.call(this, {\n valueKey: 'current',\n strict: false,\n });\n }\n\n detached() {\n this.pause();\n }\n\n ready() {\n this.createSelectorQuery()\n .select('#swiper')\n .boundingClientRect((rect) => {\n this.setData({\n _width: rect.width,\n _height: rect.height,\n });\n this.initItem();\n this.initNav();\n this.initCurrent();\n })\n .exec();\n }\n\n /**\n * 初始化 swiper-item\n */\n initItem() {\n const { direction } = this.properties;\n this.children = this.getRelationNodes('./swiper-item');\n this.children.forEach((item, index) => {\n item.setIndex(index, direction);\n });\n this.setData({\n total: this.children.length,\n });\n }\n\n /**\n * 初始化 swiper-nav\n */\n initNav() {\n const { _navigation } = this.data;\n if (_navigation) {\n // 启用内部导航器\n this.$nav = this.selectComponent('#swiperNav');\n } else {\n // 启用插槽嵌入的导航器\n this.$nav = this.getRelationNodes('./swiper-nav')?.[0];\n }\n }\n\n /**\n * 初始化也需要等待wxs完成，由wxs触发inited\n */\n inited() {\n this.updateNav(this.control.get());\n this.setData({\n inited: true,\n });\n }\n\n /**\n * 初始化current\n * 需要通过wxs更新位置，存在短暂延迟\n */\n initCurrent() {\n let index = +this.control.initValue;\n // 检查索引初始值超出范围\n index = Math.min(index, this.children.length - 1);\n index = Math.max(index, 0);\n this.control.set(index, {\n currentInited: true,\n // 默认为0时，不需要等待wxs计算位置，可直接显示\n inited: index === 0,\n ...this.calcOffset(index as any),\n });\n }\n\n play() {\n this.pause();\n const { interval } = this.properties;\n this.timer = setInterval(() => {\n const { inited } = this.data;\n if (!inited) return;\n this.next({ cycle: true, source: 'autoplay' });\n }, interval as any);\n }\n\n replay() {\n const { autoplay } = this.properties;\n autoplay && this.play();\n }\n\n pause() {\n this.timer && clearInterval(this.timer);\n this.timer = null;\n }\n\n /**\n * 跳转目标页\n * @param index 目标页索引\n * @param source 来源标记\n * @returns\n */\n goto(index: number, source: string) {\n if (this.control.get() === index) {\n this.update(index);\n return;\n }\n this.control.change(\n index,\n {\n current: index,\n source,\n },\n () => {\n this.update(index);\n },\n );\n }\n\n /**\n * 更新目标页\n * @param index 目标页索引（一页可能有多个item）\n * @returns\n */\n update(index: number, finish?) {\n if (!this.children) return;\n const len = this.children.length;\n let fixIndex = +index;\n if (Number.isNaN(fixIndex)) return;\n if (fixIndex <= 0) {\n fixIndex = 0;\n } else if (fixIndex > len - 1) {\n fixIndex = len - 1;\n }\n this.updateNav(fixIndex);\n this.control.set(fixIndex, this.calcOffset(fixIndex), finish);\n }\n\n /**\n * 更新导航器\n * @param index\n */\n updateNav(index) {\n if (!this.$nav) return;\n const { direction } = this.properties;\n this.$nav?.onChange({\n index,\n total: this.children.length,\n direction,\n });\n }\n\n calcOffset(index: number) {\n const { direction } = this.properties;\n const { _width, _height } = this.data;\n if ((direction as any) === DIRECTION.HOR) {\n return {\n offsetX: -index * _width,\n };\n }\n return {\n offsetY: -index * _height,\n };\n }\n\n /**\n * 下一页\n * @param opt\n */\n next(opt: SwitchOpt) {\n const innerVal = this.control.get();\n const len = this.children.length;\n let nextIndex = innerVal;\n if (opt.cycle && innerVal === len - 1) {\n // 最后一个时，跳转第一个\n nextIndex = 0;\n } else if (len - 1 > innerVal) {\n nextIndex += 1;\n }\n this.goto(nextIndex, opt.source);\n }\n\n /**\n * 上一页\n * @param opt\n */\n prev(opt: SwitchOpt) {\n const innerVal = this.control.get();\n const len = this.children.length;\n let nextIndex = innerVal;\n if (opt.cycle && innerVal === 0) {\n // 第一个时，跳转到最后一个\n nextIndex = len - 1;\n } else if (nextIndex > 0) {\n nextIndex -= 1;\n }\n this.goto(nextIndex, opt.source);\n }\n\n /**\n * 内置导航组件，监听按钮点击\n * @param e\n */\n onSwiperNavBtnChange(e) {\n const { dir, ...rest } = e.detail;\n this.pause();\n this?.[dir](rest);\n }\n}\n"]}
|
