增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
288
tuniao-ui/components/tn-custom-swiper-item/index.wxs
Normal file
288
tuniao-ui/components/tn-custom-swiper-item/index.wxs
Normal file
@@ -0,0 +1,288 @@
|
||||
|
||||
function setTimeout(instance, cb, time) {
|
||||
if (time > 0) {
|
||||
var s = getDate().getTime()
|
||||
var fn = function () {
|
||||
if (getDate().getTime() - s > time) {
|
||||
cb && cb()
|
||||
} else
|
||||
instance.requestAnimationFrame(fn)
|
||||
}
|
||||
fn()
|
||||
}
|
||||
else
|
||||
cb && cb()
|
||||
}
|
||||
|
||||
// 判断触摸的移动方向
|
||||
function decideSwiperDirection(startTouches, currentTouches, vertical) {
|
||||
// 震动偏移容差
|
||||
var toleranceShake = 150
|
||||
// 移动容差
|
||||
var toleranceTranslate = 10
|
||||
|
||||
if (!vertical) {
|
||||
// 水平方向移动
|
||||
if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
|
||||
// console.log(currentTouches.x, startTouches.x);
|
||||
if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
|
||||
if (currentTouches.x - startTouches.x > 0) {
|
||||
return 'right'
|
||||
} else if (currentTouches.x - startTouches.x < 0) {
|
||||
return 'left'
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 垂直方向移动
|
||||
if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
|
||||
// console.log(currentTouches.x, startTouches.x);
|
||||
if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
|
||||
if (currentTouches.y - startTouches.y > 0) {
|
||||
return 'down'
|
||||
} else if (currentTouches.y - startTouches.y < 0) {
|
||||
return 'up'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// swiperItem参数数据更新
|
||||
var itemDataObserver = function(newVal, oldVal, ownerInstance, instance) {
|
||||
if (!newVal || newVal === 'undefined') return
|
||||
var state = ownerInstance.getState()
|
||||
state.itemData = newVal
|
||||
}
|
||||
|
||||
// swiperIndex数据更新
|
||||
var currentIndexObserver = function(newVal, oldVal, ownerInstance, instance) {
|
||||
if ((!newVal && newVal != 0) || newVal === 'undefined') return
|
||||
var state = ownerInstance.getState()
|
||||
state.currentIndex = newVal
|
||||
}
|
||||
|
||||
// containerData数据更新
|
||||
var containerDataObserver = function(newVal, oldVal, ownerInstance, instance) {
|
||||
if (!newVal || newVal === 'undefined') return
|
||||
var state = ownerInstance.getState()
|
||||
state.containerData = newVal
|
||||
}
|
||||
|
||||
// 开始触摸
|
||||
var touchStart = function(event, ownerInstance) {
|
||||
console.log('touchStart');
|
||||
var instance = event.instance
|
||||
var dataset = instance.getDataset()
|
||||
var state = ownerInstance.getState()
|
||||
var itemData = state.itemData
|
||||
var containerData = state.containerData
|
||||
|
||||
// 由于当前SwiperIndex初始为0，可能会导致swiperIndex数据没有更新
|
||||
if (!state.currentIndex || state.currentIndex === 'undefined') {
|
||||
state.currentIndex = 0
|
||||
}
|
||||
|
||||
if (!containerData || containerData.circular === 'undefined') {
|
||||
containerData.circular = false
|
||||
}
|
||||
state.containerData = containerData
|
||||
|
||||
// 如果当前切换动画还没执行结束，再次触摸会重新加载对应的swiperContainer的信息
|
||||
// console.log(containerData.animationFinish);
|
||||
if (!containerData.animationFinish) {
|
||||
ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
|
||||
status: 'reload'
|
||||
})
|
||||
}
|
||||
|
||||
// 判断是否为为当前显示的SwiperItem
|
||||
if (itemData.index != state.currentIndex) return
|
||||
|
||||
var touches = event.changedTouches[0]
|
||||
if (!touches) return
|
||||
|
||||
// 标记滑动开始时间
|
||||
state.touchStartTime = getDate().getTime()
|
||||
|
||||
// 记录当前滑动开始的x，y坐标
|
||||
state.touchRelactive = {
|
||||
x: touches.pageX,
|
||||
y: touches.pageY
|
||||
}
|
||||
// 记录触摸id，用于处理多指的情况
|
||||
state.touchId = touches.identifier
|
||||
|
||||
// 标记开始触摸
|
||||
state.touching = true
|
||||
ownerInstance.callMethod('updateTouchingStatus', {
|
||||
status: true
|
||||
})
|
||||
}
|
||||
|
||||
// 正在移动
|
||||
var touchMove = function(event, ownerInstance) {
|
||||
console.log('touchMove');
|
||||
var instance = event.instance
|
||||
var dataset = instance.getDataset()
|
||||
var state = ownerInstance.getState()
|
||||
var itemData = state.itemData
|
||||
var containerData = state.containerData
|
||||
|
||||
// 判断是否为为当前显示的SwiperItem
|
||||
if (itemData.index != state.currentIndex) return
|
||||
|
||||
// 判断是否开始触摸
|
||||
if (!state.touching) return
|
||||
|
||||
var touches = event.changedTouches[0]
|
||||
if (!touches) return
|
||||
// 判断是否为同一个触摸点
|
||||
if (state.touchId != touches.identifier) return
|
||||
|
||||
var currentTouchRelactive = {
|
||||
x: touches.pageX,
|
||||
y: touches.pageY
|
||||
}
|
||||
|
||||
// 计算相对位移比例
|
||||
if (containerData.vertical) {
|
||||
var touchDistance = currentTouchRelactive.y - state.touchRelactive.y
|
||||
var itemHeight = itemData.itemHeight
|
||||
var distanceRate = touchDistance / itemHeight
|
||||
// console.log(currentTouchRelactive.y, touchDistance, itemHeight, distanceRate);
|
||||
|
||||
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
|
||||
if (!containerData.circular &&
|
||||
((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// 如果超出了距离则不进行操作
|
||||
if((Math.abs(touchDistance) > (itemData.itemTop + itemData.itemHeight))) {
|
||||
ownerInstance.callMethod('updateParentSwiperContainerStyle', {
|
||||
value: distanceRate < 0 ? -1 : 1
|
||||
})
|
||||
return
|
||||
}
|
||||
} else {
|
||||
var touchDistance = currentTouchRelactive.x - state.touchRelactive.x
|
||||
var itemWidth = itemData.itemWidth
|
||||
var distanceRate = touchDistance / itemWidth
|
||||
// console.log(currentTouchRelactive.x, touchDistance, itemWidth, distanceRate);
|
||||
|
||||
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
|
||||
if (!containerData.circular &&
|
||||
((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// 如果超出了距离则不进行操作
|
||||
if((Math.abs(touchDistance) > (itemData.itemLeft + itemData.itemWidth))) {
|
||||
ownerInstance.callMethod('updateParentSwiperContainerStyle', {
|
||||
value: distanceRate < 0 ? -1 : 1
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
ownerInstance.callMethod('updateParentSwiperContainerStyle', {
|
||||
value: distanceRate
|
||||
})
|
||||
}
|
||||
|
||||
// 移动结束
|
||||
var touchEnd = function(event, ownerInstance) {
|
||||
console.log('touchEnd');
|
||||
var instance = event.instance
|
||||
var dataset = instance.getDataset()
|
||||
var state = ownerInstance.getState()
|
||||
var itemData = state.itemData
|
||||
var containerData = state.containerData
|
||||
|
||||
// 判断是否为为当前显示的SwiperItem
|
||||
if (itemData.index != state.currentIndex) return
|
||||
|
||||
// 判断是否开始触摸
|
||||
if (!state.touching) return
|
||||
|
||||
var touches = event.changedTouches[0]
|
||||
if (!touches) return
|
||||
// 判断是否为同一个触摸点
|
||||
if (state.touchId != touches.identifier) return
|
||||
|
||||
|
||||
var currentTime = getDate().getTime()
|
||||
var currentTouchRelactive = {
|
||||
x: touches.pageX,
|
||||
y: touches.pageY
|
||||
}
|
||||
|
||||
if (containerData.vertical) {
|
||||
// 判断触摸移动方向
|
||||
var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, true)
|
||||
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
|
||||
if (containerData.circular ||
|
||||
!((state.currentIndex === 0 && direction === 'down') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'up'))
|
||||
) {
|
||||
// 判断触摸的时间和移动的距离是否超过了当前itemHeight的一半，如果是则执行切换操作
|
||||
// console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.y - state.touchRelactive.y));
|
||||
if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.y - state.touchRelactive.y) < itemData.itemHeight / 2) {
|
||||
ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
|
||||
status: 'reset'
|
||||
})
|
||||
} else {
|
||||
// console.log(direction, state.touchRelactive.y, currentTouchRelactive.y);
|
||||
|
||||
ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
|
||||
direction: direction
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 判断触摸移动方向
|
||||
var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, false)
|
||||
// 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
|
||||
if (containerData.circular ||
|
||||
!((state.currentIndex === 0 && direction === 'right') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'left'))
|
||||
) {
|
||||
// 判断触摸的时间和移动的距离是否超过了当前itemWidth的一半，如果是则执行切换操作
|
||||
// console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.x - state.touchRelactive.x));
|
||||
if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.x - state.touchRelactive.x) < itemData.itemWidth / 2) {
|
||||
ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
|
||||
status: 'reset'
|
||||
})
|
||||
} else {
|
||||
// console.log(direction, state.touchRelactive.x, currentTouchRelactive.x);
|
||||
|
||||
ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
|
||||
direction: direction
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 清除标记
|
||||
state.touchId = null
|
||||
state.touchRelactive = null
|
||||
state.touchStartTime = 0
|
||||
|
||||
|
||||
// 标记停止触摸
|
||||
state.touching = true
|
||||
ownerInstance.callMethod('updateTouchingStatus', {
|
||||
status: false
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
itemDataObserver: itemDataObserver,
|
||||
currentIndexObserver: currentIndexObserver,
|
||||
containerDataObserver: containerDataObserver,
|
||||
touchStart: touchStart,
|
||||
touchMove: touchMove,
|
||||
touchEnd: touchEnd
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view
|
||||
class="tn-c-swiper-item"
|
||||
:style="[swiperStyle]"
|
||||
:itemData="itemData"
|
||||
:currentIndex="currentIndex"
|
||||
:containerData="containerData"
|
||||
:change:itemData="wxs.itemDataObserver"
|
||||
:change:currentIndex="wxs.currentIndexObserver"
|
||||
:change:containerData="wxs.containerDataObserver"
|
||||
@touchstart="wxs.touchStart"
|
||||
:catch:touchmove="touching?wxs.touchMove:''"
|
||||
:catch:touchend="touching?wxs.touchEnd:''"
|
||||
>
|
||||
<view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view
|
||||
class="tn-c-swiper-item"
|
||||
:style="[swiperStyle]"
|
||||
:itemData="itemData"
|
||||
:currentIndex="currentIndex"
|
||||
:containerData="containerData"
|
||||
:change:itemData="wxs.itemDataObserver"
|
||||
:change:currentIndex="wxs.currentIndexObserver"
|
||||
:change:containerData="wxs.containerDataObserver"
|
||||
@touchstart="wxs.touchStart"
|
||||
@touchmove="wxs.touchMove"
|
||||
@touchend="wxs.touchEnd"
|
||||
>
|
||||
<view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script src="./index.wxs" lang="wxs" module="wxs"></script>
|
||||
<script>
|
||||
export default {
|
||||
name: 'tn-custom-swiper-item',
|
||||
props: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
// swiperItem公共数据
|
||||
itemData() {
|
||||
return {
|
||||
index: this.index,
|
||||
itemWidth: this.itemWidth,
|
||||
itemHeight: this.itemHeight,
|
||||
itemTop: this.itemTop,
|
||||
itemLeft: this.itemLeft
|
||||
}
|
||||
},
|
||||
currentIndex() {
|
||||
return this.parentData.currentIndex
|
||||
},
|
||||
containerData() {
|
||||
return {
|
||||
duration: this.parentData.duration,
|
||||
animationFinish: this.parentData.swiperContainerAnimationFinish,
|
||||
circular: this.parentData.circular,
|
||||
swiperItemLength: this.swiperItemLength,
|
||||
vertical: this.parentData.vertical
|
||||
}
|
||||
},
|
||||
swiperStyle() {
|
||||
let style = {}
|
||||
style.transform = `translate3d(${this.translateX}%, ${this.translateY}%, 0px)`
|
||||
return style
|
||||
},
|
||||
containerStyle() {
|
||||
let style = {}
|
||||
if (this.parentData.customSwiperStyle && Object.keys(this.parentData.customSwiperStyle).length > 0) {
|
||||
style = this.parentData.customSwiperStyle
|
||||
}
|
||||
if ((this.currentIndex === 0 && this.index === this.swiperItemLength - 1) || (this.index === this.currentIndex - 1) &&
|
||||
(this.parentData.prevSwiperStyle && Object.keys(this.parentData.prevSwiperStyle).length > 0)
|
||||
) {
|
||||
// 前一个swiperItem
|
||||
const copyStyle = JSON.parse(JSON.stringify(style))
|
||||
style = Object.assign(copyStyle, this.parentData.prevSwiperStyle)
|
||||
}
|
||||
if ((this.currentIndex === this.swiperItemLength - 1 && this.index === 0) || (this.index === this.currentIndex + 1) &&
|
||||
(this.parentData.nextSwiperStyle && Object.keys(this.parentData.nextSwiperStyle).length > 0)
|
||||
) {
|
||||
// 后一个swiperItem
|
||||
const copyStyle = JSON.parse(JSON.stringify(style))
|
||||
style = Object.assign(copyStyle, this.parentData.nextSwiperStyle)
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 父组件参数
|
||||
parentData: {
|
||||
duration: 500,
|
||||
currentIndex: 0,
|
||||
swiperContainerAnimationFinish: false,
|
||||
circular: false,
|
||||
vertical: false,
|
||||
prevSwiperStyle: {},
|
||||
customSwiperStyle: {},
|
||||
nextSwiperStyle: {}
|
||||
},
|
||||
// 标记当前是否正在触摸
|
||||
touching: true,
|
||||
// 当前swiperItem的偏移位置
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
// 当前swiperItem的宽高
|
||||
itemWidth: 0,
|
||||
itemHeight: 0,
|
||||
// 当前swiperItem的位置信息
|
||||
itemTop: 0,
|
||||
itemLeft: 0,
|
||||
// 当前swiperItem的状态 prev current next
|
||||
status: 'current',
|
||||
// 当前swiperItem的index序号
|
||||
index: 0,
|
||||
// swiperItem的的数量
|
||||
swiperItemLength: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.parent = false
|
||||
this.updateParentData()
|
||||
// 获取当前父组件children的数量作为当前swiperItem的序号
|
||||
this.index = this.parent.children.length
|
||||
this.parent && this.parent.children.push(this)
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initSwiperItem()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 初始化swiperItem
|
||||
initSwiperItem() {
|
||||
this.getSwiperItemRect(() => {
|
||||
this.parent.updateAllSwiperItemStyle()
|
||||
this.parentData.swiperContainerAnimationFinish = true
|
||||
})
|
||||
},
|
||||
// 获取swiperItem的信息
|
||||
async getSwiperItemRect(callback) {
|
||||
const swiperItemRes = await this._tGetRect('.tn-c-swiper-item')
|
||||
if (!swiperItemRes.height || !swiperItemRes.width) {
|
||||
setTimeout(() => {
|
||||
this.getSwiperItemRect()
|
||||
}, 30)
|
||||
return
|
||||
}
|
||||
|
||||
this.itemWidth = swiperItemRes.width
|
||||
this.itemHeight = swiperItemRes.height
|
||||
this.itemTop = swiperItemRes.top
|
||||
this.itemLeft = swiperItemRes.left
|
||||
callback && callback()
|
||||
},
|
||||
// 更新swiperItem样式
|
||||
updateSwiperItemStyle(swiperItemLength, currentIndex = undefined) {
|
||||
currentIndex = currentIndex != undefined ? currentIndex : this.parentData.currentIndex
|
||||
this.swiperItemLength = swiperItemLength
|
||||
// 根据当前swiperItem的序号设置偏移位置
|
||||
// 判断当前swiperItem是否为第一个，如果是则将最后的swiperItem移动到当前的前一个位置（即最前面）
|
||||
if (currentIndex === 0 && this.index === swiperItemLength - 1) {
|
||||
if (this.parentData.vertical) {
|
||||
this.translateX = 0
|
||||
this.translateY = -100
|
||||
} else {
|
||||
this.translateX = -100
|
||||
this.translateY = 0
|
||||
}
|
||||
}
|
||||
// 判断当前swiperItem是否为最后一个，如果是则将最前的swiperItem移动到当前的后一个位置（即最后面）
|
||||
else if (currentIndex === swiperItemLength - 1 && this.index === 0) {
|
||||
if (this.parentData.vertical) {
|
||||
this.translateX = 0
|
||||
this.translateY = swiperItemLength * 100
|
||||
} else {
|
||||
this.translateX = swiperItemLength * 100
|
||||
this.translateY = 0
|
||||
}
|
||||
}
|
||||
// 正常情况
|
||||
else {
|
||||
if (this.parentData.vertical) {
|
||||
this.translateX = 0
|
||||
this.translateY = this.index * 100
|
||||
} else {
|
||||
this.translateX = this.index * 100
|
||||
this.translateY = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新父组件的偏移位置信息
|
||||
updateParentSwiperContainerStyle(e) {
|
||||
this.parent.updateSwiperContainerStyleWithValue(e.value)
|
||||
},
|
||||
// 根据方向更新父组件的偏移位置信息
|
||||
updateParentSwiperContainerStyleWithDirection(e) {
|
||||
this.parent.updateSwiperContainerStyleWithDirection(e.direction)
|
||||
},
|
||||
// 修改父组件的偏移位置的状态
|
||||
changeParentSwiperContainerStyleStatus(e) {
|
||||
// reset -> 重置 reload -> 重载
|
||||
this.parent.updateSwiperContainerStyleWithDirection(e.status)
|
||||
},
|
||||
// 更新父组件信息
|
||||
updateParentData() {
|
||||
this.getParentData('tn-custom-swiper')
|
||||
},
|
||||
// 更新触摸状态
|
||||
updateTouchingStatus(e) {
|
||||
this.touching = e.status
|
||||
if (e.status) {
|
||||
this.parent.stopAutoPlay()
|
||||
} else {
|
||||
this.parent.startAutoPlay()
|
||||
}
|
||||
},
|
||||
// 提取对应用户自定义样式
|
||||
extractCustomStyle(customStyle) {
|
||||
let data = {
|
||||
transform: {},
|
||||
style: {}
|
||||
}
|
||||
if (!customStyle) return data
|
||||
// 允许设置的transform参数
|
||||
const allowTransformProps = ['scale','scaleX','scaleY','scaleZ','rotate','rotateX','rotateY','rotateZ']
|
||||
for (let prop in customStyle) {
|
||||
if (prop.startsWith('transformProp')) {
|
||||
// transform里面的样式
|
||||
let transformProp = prop.substring('transformProp'.length)
|
||||
const index = allowTransformProps.findIndex((item) => {
|
||||
return item.toLowerCase() === transformProp.toLowerCase()
|
||||
})
|
||||
if (index !== -1) {
|
||||
transformProp = allowTransformProps[index]
|
||||
data.transform[transformProp] = customStyle[prop]
|
||||
}
|
||||
} else {
|
||||
// 普通样式
|
||||
data.style[prop] = customStyle[prop]
|
||||
}
|
||||
}
|
||||
return data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tn-c-swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
will-change: transform;
|
||||
cursor: none;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
|
||||
.item__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user