index.wxs 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657
  1. function setTimeout(instance, cb, time) {
  2. if (time > 0) {
  3. var s = getDate().getTime()
  4. var fn = function () {
  5. if (getDate().getTime() - s > time) {
  6. cb && cb()
  7. } else
  8. instance.requestAnimationFrame(fn)
  9. }
  10. fn()
  11. }
  12. else
  13. cb && cb()
  14. }
  15. // 判断触摸的移动方向
  16. function decideSwiperDirection(startTouches, currentTouches, direction) {
  17. // 震动偏移容差
  18. var toleranceShake = 30
  19. // 移动容差
  20. var toleranceTranslate = 10
  21. if (direction === 'horizontal') {
  22. // 水平方向移动
  23. if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
  24. // console.log(currentTouches.x, startTouches.x);
  25. if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
  26. if (currentTouches.x - startTouches.x > 0) {
  27. return 'right'
  28. } else if (currentTouches.x - startTouches.x < 0) {
  29. return 'left'
  30. }
  31. }
  32. }
  33. } else if (direction === 'vertical') {
  34. // 垂直方向移动
  35. if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
  36. // console.log(currentTouches.x, startTouches.x);
  37. if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
  38. if (currentTouches.y - startTouches.y > 0) {
  39. return 'down'
  40. } else if (currentTouches.y - startTouches.y < 0) {
  41. return 'up'
  42. }
  43. }
  44. }
  45. }
  46. return ''
  47. }
  48. // 更新轮播样式信息
  49. function updateSwiperStyle(currentTouches, instance, state) {
  50. var itemData = state.itemData
  51. var itemsInstance = state.itemsInstance
  52. var list = state.list
  53. var currentIndex = state.currentIndex
  54. var touchRelactive = state.touchRelactive
  55. // console.log(itemAnimationWidth);
  56. if (itemData.direction === 'horizontal') {
  57. // 水平方向
  58. var itemAnimationWidth = state.itemAnimationWidth
  59. // 偏移的x轴距离
  60. var translateX = currentTouches.x - touchRelactive.x
  61. if (currentTouches.x > itemData.windowWidth || currentTouches.x < 0) return
  62. // console.log(translateX);
  63. // 更新其他轮播样式
  64. if (state.direction == 'left') {
  65. // 设置当前激活元素的偏移量
  66. instance.setStyle({
  67. 'transform': 'translate3d('+ translateX + 'px, 0px, 0px)',
  68. 'z-index': list[currentIndex].zIndex + 1,
  69. 'opacity': list[currentIndex].opacity
  70. })
  71. // 移动距离是否超过了指定的容器宽度
  72. if (Math.abs(translateX) > itemAnimationWidth) {
  73. state.itemsInstance.forEach( function(itemInstance, index) {
  74. if (index != currentIndex) {
  75. var preIndex = (index == 0) ? list.length - 1 : index - 1
  76. var distanceRate = (Math.abs(translateX) - itemAnimationWidth) / (itemData.itemWidth - itemAnimationWidth)
  77. var itemTranslateX = list[index].translateX - (list[index].translateX - list[preIndex].translateX) * distanceRate
  78. var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
  79. var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
  80. // console.log(preIndex);
  81. // console.log(list[index]);
  82. // console.log(distanceRate);
  83. // console.log(itemTranslateX);
  84. // console.log(itemScale);
  85. // console.log(itemOpacity);
  86. // console.log('-----------------------------------------------------------');
  87. itemInstance.setStyle({
  88. 'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
  89. 'z-index': list[index].zIndex,
  90. 'opacity': itemOpacity
  91. })
  92. }
  93. })
  94. }
  95. } else if (state.direction == 'right') {
  96. var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
  97. // 右滑的时候把最底部的取出,并放到最高层级
  98. state.itemsInstance[preIndex].setStyle({
  99. 'transform': 'translate3d(-' + (itemData.itemWidth - translateX) + 'px, 0px, 0px) scale(1)',
  100. 'z-index': list[currentIndex].zIndex + 1,
  101. 'opacity': list[currentIndex].opacity
  102. })
  103. // 当前轮播逐渐缩小
  104. if (Math.abs(translateX) < itemAnimationWidth) {
  105. state.itemsInstance.forEach( function(itemInstance, index) {
  106. if (index != preIndex) {
  107. var replaceIndex = index == list.length - 1 ? 0 : index + 1
  108. var distanceRate = Math.abs(translateX) / itemAnimationWidth
  109. var itemTranslateX = list[index].translateX + (list[replaceIndex].translateX - list[index].translateX) * distanceRate
  110. var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
  111. var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
  112. // console.log(preIndex);
  113. // console.log(index);
  114. // console.log(replaceIndex);
  115. // console.log(list[index]);
  116. // console.log(list[replaceIndex].translateX - list[index].translateX);
  117. // console.log(distanceRate);
  118. // console.log(itemTranslateX);
  119. // console.log(itemScale);
  120. // console.log('-----------------------------------------------------------');
  121. itemInstance.setStyle({
  122. 'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
  123. 'z-index': list[index].zIndex,
  124. 'opacity': itemOpacity
  125. })
  126. }
  127. })
  128. }
  129. }
  130. } else if (itemData.direction === 'vertical') {
  131. // 垂直方向
  132. var itemAnimationHeight = state.itemAnimationHeight
  133. // 偏移的y轴距离
  134. var translateY = currentTouches.y - touchRelactive.y
  135. if (currentTouches.y > itemData.windowHeight || currentTouches.y < 0) return
  136. // console.log(translateX);
  137. // 更新其他轮播样式
  138. if (state.direction == 'up') {
  139. // 设置当前激活元素的偏移量
  140. instance.setStyle({
  141. 'transform': 'translate3d(0px, '+ translateY + 'px, 0px)',
  142. 'z-index': list[currentIndex].zIndex + 1,
  143. 'opacity': list[currentIndex].opacity
  144. })
  145. // 移动距离是否超过了指定的容器宽度
  146. if (Math.abs(translateY) > itemAnimationHeight) {
  147. state.itemsInstance.forEach( function(itemInstance, index) {
  148. if (index != currentIndex) {
  149. var preIndex = (index == 0) ? list.length - 1 : index - 1
  150. var distanceRate = (Math.abs(translateY) - itemAnimationHeight) / (itemData.itemHeight - itemAnimationHeight)
  151. var itemTranslateY = list[index].translateY - (list[index].translateY - list[preIndex].translateY) * distanceRate
  152. var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
  153. var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
  154. // console.log(preIndex);
  155. // console.log(list[index]);
  156. // console.log(distanceRate);
  157. // console.log(itemTranslateX);
  158. // console.log(itemScale);
  159. // console.log('-----------------------------------------------------------');
  160. itemInstance.setStyle({
  161. 'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
  162. 'z-index': list[index].zIndex,
  163. 'opacity': itemOpacity
  164. })
  165. }
  166. })
  167. }
  168. } else if (state.direction == 'down') {
  169. var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
  170. // 下滑的时候把最底部的取出,并放到最高层级
  171. state.itemsInstance[preIndex].setStyle({
  172. 'transform': 'translate3d(0px, -' + (itemData.itemHeight - translateY) + 'px, 0px) scale(1)',
  173. 'z-index': list[currentIndex].zIndex + 1,
  174. 'opacity': list[currentIndex].opacity
  175. })
  176. // 当前轮播逐渐缩小
  177. if (Math.abs(translateY) < itemAnimationHeight) {
  178. state.itemsInstance.forEach( function(itemInstance, index) {
  179. if (index != preIndex) {
  180. var replaceIndex = index == list.length - 1 ? 0 : index + 1
  181. var distanceRate = Math.abs(translateY) / itemAnimationHeight
  182. var itemTranslateY = list[index].translateY + (list[replaceIndex].translateY - list[index].translateY) * distanceRate
  183. var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
  184. var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
  185. // console.log(preIndex);
  186. // console.log(index);
  187. // console.log(replaceIndex);
  188. // console.log(list[index]);
  189. // console.log(list[replaceIndex].translateX - list[index].translateX);
  190. // console.log(distanceRate);
  191. // console.log(itemTranslateX);
  192. // console.log(itemScale);
  193. // console.log('-----------------------------------------------------------');
  194. itemInstance.setStyle({
  195. 'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
  196. 'z-index': list[index].zIndex,
  197. 'opacity': itemOpacity
  198. })
  199. }
  200. })
  201. }
  202. }
  203. }
  204. }
  205. // 更新当前轮播序号
  206. function updateCurrentSwiperIndex(index, ownerInstance, state) {
  207. state.currentIndex = index
  208. ownerInstance.callMethod('changeSwiperIndex', {
  209. index: index
  210. })
  211. }
  212. // 切换到下一个轮播
  213. function switchNextSwiper(newIndex, touches, instance, state) {
  214. var currentIndex = state.currentIndex
  215. var list = state.list
  216. var direction = state.itemData.direction
  217. var touchRelactive = state.touchRelactive || {x: 0, y: 0}
  218. // 已经完成轮播切换
  219. var currentListItemData = JSON.parse(JSON.stringify(list))
  220. if (direction === 'horizontal') {
  221. // 水平方向移动
  222. var itemWidth = state.itemData.itemWidth
  223. // 当前轮播移动到最左边
  224. instance.setStyle({
  225. 'transform': 'translate3d(-'+ itemWidth + 'px, 0px, 0px) scale(1)',
  226. 'z-index': list[currentIndex].zIndex + 1,
  227. 'opacity': list[currentIndex].opacity
  228. })
  229. // 计算当前移动需要的剩余时间
  230. var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
  231. setTimeout(instance, function() {
  232. for (var i = list.length - 1; i >= 0; i--) {
  233. var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
  234. // console.log(i);
  235. // console.log(replaceIndex);
  236. state.itemsInstance[i].setStyle({
  237. 'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
  238. 'z-index': currentListItemData[replaceIndex].zIndex,
  239. 'opacity': currentListItemData[replaceIndex].opacity
  240. })
  241. state.list[i] = currentListItemData[replaceIndex]
  242. }
  243. }, time)
  244. } else if (direction === 'vertical') {
  245. // 垂直方向移动
  246. var itemHeight = state.itemData.itemHeight
  247. // 当前轮播移动到最上边
  248. instance.setStyle({
  249. 'transform': 'translate3d(0px, -'+ itemHeight + 'px, 0px) scale(1)',
  250. 'z-index': list[currentIndex].zIndex + 1,
  251. 'opacity': list[currentIndex].opacity
  252. })
  253. // 计算当前移动需要的剩余时间
  254. var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
  255. setTimeout(instance, function() {
  256. for (var i = list.length - 1; i >= 0; i--) {
  257. var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
  258. // console.log(i);
  259. // console.log(replaceIndex);
  260. state.itemsInstance[i].setStyle({
  261. 'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
  262. 'z-index': currentListItemData[replaceIndex].zIndex,
  263. 'opacity': currentListItemData[replaceIndex].opacity
  264. })
  265. state.list[i] = currentListItemData[replaceIndex]
  266. }
  267. }, time)
  268. }
  269. }
  270. // 切换到上一个轮播
  271. function switchPrevSwiper(newIndex, touches, instance, state) {
  272. var currentIndex = state.currentIndex
  273. var list = state.list
  274. var direction = state.itemData.direction
  275. var touchRelactive = state.touchRelactive || {x: 0, y: 0}
  276. var currentListItemData = JSON.parse(JSON.stringify(list))
  277. if (direction === 'horizontal') {
  278. // 水平方向移动
  279. var itemWidth = state.itemData.itemWidth
  280. // 当前上一个轮播移动到正常位置
  281. state.itemsInstance[newIndex].setStyle({
  282. 'transform': 'translate3d(0px, 0px, 0px) scale(1)',
  283. 'z-index': list[currentIndex].zIndex + 1,
  284. 'opacity': list[currentIndex].opacity
  285. })
  286. // 计算当前移动需要的剩余时间
  287. var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
  288. // 更新除当前上一个轮播外的其他轮播,向后移动一个层级
  289. // 更新列表位置相关数据
  290. setTimeout(instance, function() {
  291. for (var i = 0; i < list.length; i++) {
  292. var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
  293. state.itemsInstance[i].setStyle({
  294. 'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
  295. 'z-index': currentListItemData[replaceIndex].zIndex,
  296. 'opacity': currentListItemData[replaceIndex].opacity
  297. })
  298. state.list[i] = currentListItemData[replaceIndex]
  299. }
  300. }, time)
  301. } else if (direction === 'vertical') {
  302. // 垂直方向移动
  303. var itemHeight = state.itemData.itemHeight
  304. // 当前上一个轮播移动到正常位置
  305. state.itemsInstance[newIndex].setStyle({
  306. 'transform': 'translate3d(0px, 0px, 0px) scale(1)',
  307. 'z-index': list[currentIndex].zIndex + 1,
  308. 'opacity': list[currentIndex].opacity
  309. })
  310. // 计算当前移动需要的剩余时间
  311. var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
  312. // 更新除当前上一个轮播外的其他轮播,向后移动一个层级
  313. // 更新列表位置相关数据
  314. setTimeout(instance, function() {
  315. for (var i = 0; i < list.length; i++) {
  316. var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
  317. state.itemsInstance[i].setStyle({
  318. 'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
  319. 'z-index': currentListItemData[replaceIndex].zIndex,
  320. 'opacity': currentListItemData[replaceIndex].opacity
  321. })
  322. state.list[i] = currentListItemData[replaceIndex]
  323. }
  324. }, time)
  325. }
  326. }
  327. // 反转动画
  328. function toggleSwiperAnimation(state, add) {
  329. if (!state.itemsInstance) return
  330. if (add === true) {
  331. state.itemsInstance.forEach(function(item, index) {
  332. if (!item.hasClass('tn-stack-swiper__item__transition')) {
  333. item.addClass('tn-stack-swiper__item__transition')
  334. }
  335. })
  336. } else {
  337. state.itemsInstance.forEach(function(item, index) {
  338. if (item.hasClass('tn-stack-swiper__item__transition')) {
  339. item.removeClass('tn-stack-swiper__item__transition')
  340. }
  341. })
  342. }
  343. }
  344. // 更新数据
  345. var itemDataObserver = function (newVal, oldVal, ownerInstance, instance) {
  346. var state = ownerInstance.getState()
  347. state.itemData = newVal
  348. }
  349. // 列表初始化
  350. var listObserver = function(newVal, oldVal, ownerInstance, instance) {
  351. var state = ownerInstance.getState()
  352. var itemData = state.itemData
  353. state.itemsInstance = ownerInstance.selectAllComponents('.tn-stack-swiper__item')
  354. state.list = newVal || []
  355. state.list.forEach(function(item, index) {
  356. var itemInstance = state.itemsInstance[index]
  357. if (item && itemInstance) {
  358. if (itemData.direction === 'horizontal') {
  359. itemInstance.setStyle({
  360. 'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
  361. 'z-index': item.zIndex,
  362. 'opacity': item.opacity
  363. })
  364. } else if (itemData.direction === 'vertical') {
  365. itemInstance.setStyle({
  366. 'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
  367. 'z-index': item.zIndex,
  368. 'opacity': item.opacity
  369. })
  370. }
  371. }
  372. })
  373. }
  374. // 切换轮播位置
  375. var swiperIndexChange = function(newVal, oldVal, ownerInstance, instance) {
  376. var state = ownerInstance.getState()
  377. // console.log(newVal);
  378. // ownerInstance.callMethod('printLog', newVal)
  379. // console.log(oldVal);
  380. // ownerInstance.callMethod('printLog', oldVal)
  381. // 排除第一次初始化和手动切换的情况
  382. if (oldVal < 0 || typeof oldVal == 'undefined' || state.currentIndex == newVal) {
  383. if (oldVal < 0 || typeof oldVal == 'undefined') {
  384. state.currentIndex = 0
  385. }
  386. return
  387. }
  388. state.currentIndex = newVal
  389. // console.log(state.currentIndex);
  390. if (newVal > oldVal || (oldVal == state.list.length - 1 && newVal == 0)) {
  391. // console.log("next");
  392. // state.itemsInstance.forEach(function(item, index) {
  393. // item.addClass("tn-stack-swiper__item__transition")
  394. // })
  395. switchNextSwiper(newVal, {
  396. pageX: 0
  397. }, state.itemsInstance[oldVal], state)
  398. } else if (newVal < oldVal || (oldVal == 0 && newVal == state.list.length - 1)) {
  399. // console.log("prev");
  400. }
  401. }
  402. // 自动轮播切换状态
  403. var autoplayFlagChange = function(newVal, oldVal, ownerInstance, instance) {
  404. var state = ownerInstance.getState()
  405. if (newVal === true) {
  406. toggleSwiperAnimation(state, true)
  407. } else {
  408. toggleSwiperAnimation(state, false)
  409. }
  410. }
  411. // 开始触摸
  412. var touchStart = function (event, ownerInstance) {
  413. // console.log('touchStart');
  414. var instance = event.instance
  415. var dataset = instance.getDataset()
  416. var state = ownerInstance.getState()
  417. var itemData = state.itemData
  418. // 判断是否为为当前显示的轮播
  419. if (dataset.index != state.currentIndex) return
  420. var touches = event.changedTouches[0]
  421. if (!touches) return
  422. // 记录当前滑动开始的x,y坐标
  423. state.touchRelactive = {
  424. x: touches.pageX,
  425. y: touches.pageY
  426. }
  427. // 记录触摸id,用于处理多指的情况
  428. state.touchId = touches.identifier
  429. if (itemData.direction === 'horizontal') {
  430. // 水平方向移动
  431. // 设置左右滑动时相对偏移距离
  432. state.itemAnimationWidth = itemData.itemWidth * (dataset.switchrate / 100)
  433. } else if (itemData.direction === 'vertical') {
  434. // 垂直方向移动
  435. // 设置上下滑动时相对偏移距离
  436. state.itemAnimationHeight = itemData.itemHeight * (dataset.switchrate / 100)
  437. }
  438. // 移除运动动画时间
  439. toggleSwiperAnimation(state, false)
  440. // 标记开始触摸
  441. state.touching = true
  442. ownerInstance.callMethod('changeTouchState', {
  443. touching: true
  444. })
  445. // 停止执行自动轮播
  446. ownerInstance.callMethod('clearAutoPlayTimer')
  447. }
  448. // 开始移动
  449. var touchMove = function (event, ownerInstance) {
  450. // console.log('touchMove');
  451. var instance = event.instance
  452. var dataset = instance.getDataset()
  453. var state = ownerInstance.getState()
  454. var itemData = state.itemData
  455. // 判断是否为为当前显示的轮播
  456. if (dataset.index != state.currentIndex) return
  457. // 还没开始触摸直接返回
  458. if (!state.touching) return
  459. var touches = event.changedTouches[0]
  460. if (!touches) return
  461. // 判断是否为同一个触摸点
  462. if (state.touchId != touches.identifier) return
  463. var currentTouchRelactive = {
  464. x: touches.pageX,
  465. y: touches.pageY
  466. }
  467. // 是否已经确定了移动方向
  468. if (!state.direction) {
  469. state.direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, itemData.direction)
  470. }
  471. // console.log(decideSwiperDirection(state.touchRelactive, currentTouchRelactive));
  472. updateSwiperStyle(currentTouchRelactive, instance, state)
  473. }
  474. // 移动结束
  475. var touchEnd = function (event, ownerInstance) {
  476. // console.log('touchEnd');
  477. var instance = event.instance
  478. var dataset = instance.getDataset()
  479. var state = ownerInstance.getState()
  480. var itemData = state.itemData
  481. var list = state.list
  482. var touchRelactive = state.touchRelactive
  483. // 判断是否为为当前显示的轮播
  484. if (dataset.index != state.currentIndex) return
  485. // 还没开始触摸直接返回
  486. if (!state.touching) return
  487. var touches = event.changedTouches[0]
  488. if (!touches) return
  489. // 判断是否为同一个触摸点
  490. if (state.touchId != touches.identifier) return
  491. // 添加运动动画时间
  492. toggleSwiperAnimation(state, true)
  493. if (itemData.direction === 'horizontal') {
  494. // 水平方向移动
  495. var itemAnimationWidth = state.itemAnimationWidth
  496. // 判断时左滑还是右滑
  497. // 判断是否超过自动滚动到下一页还是回滚
  498. if (state.direction == 'left') {
  499. if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
  500. list.forEach(function(item, index) {
  501. var itemInstance = state.itemsInstance[index]
  502. if (item && itemInstance) {
  503. itemInstance.setStyle({
  504. 'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
  505. 'z-index': item.zIndex
  506. })
  507. }
  508. })
  509. } else {
  510. var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
  511. switchNextSwiper(newIndex, touches, instance, state)
  512. updateCurrentSwiperIndex(newIndex, ownerInstance, state)
  513. }
  514. } else if (state.direction == 'right') {
  515. if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
  516. // 滑动显示图片回滚
  517. var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
  518. state.itemsInstance[preIndex].setStyle({
  519. 'transform': 'translate3d(-' + itemData.itemWidth + 'px, 0px, 0px) scale(1)',
  520. 'z-index': list[state.currentIndex].zIndex + 1,
  521. 'opacity': list[state.currentIndex].opacity
  522. })
  523. list.forEach(function(item, index) {
  524. var itemInstance = state.itemsInstance[index]
  525. if (item && itemInstance) {
  526. itemInstance.setStyle({
  527. 'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
  528. 'z-index': item.zIndex,
  529. 'opacity': item.opacity
  530. })
  531. }
  532. })
  533. } else {
  534. var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
  535. switchPrevSwiper(newIndex, touches, instance, state)
  536. updateCurrentSwiperIndex(newIndex, ownerInstance, state)
  537. }
  538. }
  539. } else if (itemData.direction === 'vertical') {
  540. // 垂直方向移动
  541. var itemAnimationHeight = state.itemAnimationHeight
  542. // 判断时上滑还是下滑
  543. // 判断是否超过自动滚动到下一页还是回滚
  544. if (state.direction == 'up') {
  545. if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
  546. list.forEach(function(item, index) {
  547. var itemInstance = state.itemsInstance[index]
  548. if (item && itemInstance) {
  549. itemInstance.setStyle({
  550. 'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
  551. 'z-index': item.zIndex,
  552. 'opacity': item.opacity
  553. })
  554. }
  555. })
  556. } else {
  557. var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
  558. switchNextSwiper(newIndex, touches, instance, state)
  559. updateCurrentSwiperIndex(newIndex, ownerInstance, state)
  560. }
  561. } else if (state.direction == 'down') {
  562. if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
  563. // 滑动显示图片回滚
  564. var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
  565. state.itemsInstance[preIndex].setStyle({
  566. 'transform': 'translate3d(0px, -' + itemData.itemHeight + 'px, 0px) scale(1)',
  567. 'z-index': list[state.currentIndex].zIndex + 1,
  568. 'opacity': list[state.currentIndex].opacity
  569. })
  570. list.forEach(function(item, index) {
  571. var itemInstance = state.itemsInstance[index]
  572. if (item && itemInstance) {
  573. itemInstance.setStyle({
  574. 'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
  575. 'z-index': item.zIndex,
  576. 'opacity': item.opacity
  577. })
  578. }
  579. })
  580. } else {
  581. var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
  582. switchPrevSwiper(newIndex, touches, instance, state)
  583. updateCurrentSwiperIndex(newIndex, ownerInstance, state)
  584. }
  585. }
  586. }
  587. // 清除对应的标志位
  588. state.touchRelactive = null
  589. state.touching = false
  590. state.direction = null
  591. state.touchId = null
  592. ownerInstance.callMethod('changeTouchState', {
  593. touching: false
  594. })
  595. // 重新开始执行自动轮播
  596. ownerInstance.callMethod('setAutoPlay')
  597. }
  598. module.exports = {
  599. itemDataObserver: itemDataObserver,
  600. listObserver: listObserver,
  601. swiperIndexChange: swiperIndexChange,
  602. autoplayFlagChange: autoplayFlagChange,
  603. touchStart: touchStart,
  604. touchMove: touchMove,
  605. touchEnd: touchEnd
  606. }