增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
230
tuniao-ui/components/tn-swipe-action-item/index.wxs
Normal file
230
tuniao-ui/components/tn-swipe-action-item/index.wxs
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
|
||||
* wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
|
||||
*/
|
||||
|
||||
// 开始触摸
|
||||
function touchStart(event, ownerInstance) {
|
||||
// 触发事件的组件的ComponentDescriptor实例
|
||||
var instance = event.instance
|
||||
// wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
|
||||
var state = instance.getState()
|
||||
if (state.disabled) return
|
||||
var touches = event.touches
|
||||
// 如果进行的是多指触控，不允许操作
|
||||
if (touches && touches.length > 1) return
|
||||
// 标识当前为滑动中状态
|
||||
state.moving = true
|
||||
// 记录触摸开始点的坐标点
|
||||
state.startX = touches[0].pageX
|
||||
state.startY = touches[0].pageY
|
||||
// 记录开始触摸的时间
|
||||
state.touchStartTime = getDate().getTime()
|
||||
|
||||
ownerInstance.callMethod('closeOther')
|
||||
}
|
||||
|
||||
// 触摸滑动
|
||||
function touchMove(event, ownerInstance) {
|
||||
// 触发事件的组件的ComponentDescriptor实例
|
||||
var instance = event.instance
|
||||
// wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
|
||||
var state = instance.getState()
|
||||
if (state.disabled || !state.moving) return
|
||||
var touches = event.touches
|
||||
var pageX = touches[0].pageX
|
||||
var pageY = touches[0].pageY
|
||||
var moveX = pageX - state.startX
|
||||
var moveY = pageY - state.startY
|
||||
var buttonsWidth = state.buttonsWidth
|
||||
|
||||
// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
|
||||
if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
|
||||
// event.preventDefault && event.preventDefault()
|
||||
// event.stopPropagation && event.stopPropagation()
|
||||
}
|
||||
// 移动的Y轴距离大于X轴距离，也即终点与起点位置连线，与Y轴夹角小于45度时，认为页面时上下滑动而不是左右滑动单元格
|
||||
if (Math.abs(moveX) < Math.abs(moveY)) return
|
||||
|
||||
// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
|
||||
// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，所以处理的方法是在超出后设置为0
|
||||
if (state.status === 'open') {
|
||||
// 在开启状态下，忽略左滑动
|
||||
if (moveX < 0) moveX = 0
|
||||
// 要收起菜单，最大能移动的距离为按钮的总宽度
|
||||
if (moveX > buttonsWidth) moveX = buttonsWidth
|
||||
// 如果是已经打开的状态，向左滑动时，移动收起菜单
|
||||
moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
|
||||
} else {
|
||||
// 关闭状态下，忽略右滑
|
||||
if (moveX > 0) return
|
||||
// 滑动的距离不允许超过所有按钮的总宽度，此时只能左滑
|
||||
// 滑动距离设置为按钮的宽度（负数）
|
||||
if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
|
||||
// 在滑动过程中不断移动单元格内容，使其不断显示出来
|
||||
moveSwipeAction(moveX, instance, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
// 触摸结束
|
||||
function touchEnd(event, ownerInstance) {
|
||||
// 触发事件的组件的ComponentDescriptor实例
|
||||
var instance = event.instance
|
||||
// wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
|
||||
var state = instance.getState()
|
||||
if (!state.moving || state.disabled) return
|
||||
var touches = event.changedTouches ? event.changedTouches[0] : {}
|
||||
var pageX = touches.pageX
|
||||
var pageY = touches.pageY
|
||||
var moveX = pageX - state.startX
|
||||
if (state.status === 'open') {
|
||||
// 在开启状态下，忽略左滑动
|
||||
if (moveX < 0) moveX = 0
|
||||
// 在开启状态下，点击一下内容区域，moveX为0，也即没有移动，这是执行收起操作
|
||||
if (moveX === 0) {
|
||||
return closeSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
|
||||
// 在开启状态下，滑动距离小于阈值，则默认不关闭同时恢复原来的打开状态
|
||||
if (Math.abs(moveX) < state.threshold) {
|
||||
openSwipeAction(instance, ownerInstance)
|
||||
} else {
|
||||
// 如果滑动距离大于阈值则执行收起逻辑
|
||||
closeSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
} else {
|
||||
|
||||
// 获取手指离开的时间
|
||||
var touchEndTime = getDate().getTime()
|
||||
// 判断是否点击了
|
||||
if (Math.abs(pageX - state.startX) < 5 && Math.abs(pageY - state.startY) < 5 && touchEndTime - state.touchStartTime < 100) {
|
||||
ownerInstance.callMethod('handlerItemClick')
|
||||
}
|
||||
|
||||
// 在关闭状态下，忽略右滑动
|
||||
if (moveX > 0) return
|
||||
if (Math.abs(moveX) < state.threshold) {
|
||||
closeSwipeAction(instance, ownerInstance)
|
||||
} else {
|
||||
openSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取过渡时间
|
||||
function getDuration(value) {
|
||||
if (value.toString().indexOf('s') >= 0) return value
|
||||
return value > 30 ? value + 'ms' : value + 's'
|
||||
}
|
||||
|
||||
// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
|
||||
function moveSwipeAction(moveX, instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
|
||||
|
||||
// 设置菜单内容部分的偏移
|
||||
instance.requestAnimationFrame(function () {
|
||||
instance.setStyle({
|
||||
// 设置translateX的值
|
||||
'transition': 'none',
|
||||
transform: 'translateX('+ moveX +'px)',
|
||||
'-webkit-transform': 'translateX('+ moveX +'px)'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 一次性展开滑动菜单
|
||||
function openSwipeAction(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
|
||||
// 处理duration单位问题
|
||||
var duration = getDuration(state.duration)
|
||||
// 展开过程中，是向左移动，所以x的偏移应该是负值
|
||||
var buttonsWidth = -state.buttonsWidth
|
||||
instance.requestAnimationFrame(function () {
|
||||
// 设置菜单主体内容
|
||||
instance.setStyle({
|
||||
'transition': 'transform ' + duration,
|
||||
'transform': 'translateX('+ buttonsWidth +'px)',
|
||||
'-webkit-transform': 'translateX('+ buttonsWidth +'px)'
|
||||
})
|
||||
})
|
||||
setStatus('open', instance, ownerInstance)
|
||||
}
|
||||
|
||||
// 一次性收起滑动菜单
|
||||
function closeSwipeAction(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||||
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
|
||||
var len = buttons.length
|
||||
// 处理duration单位问题
|
||||
var duration = getDuration(state.duration)
|
||||
instance.requestAnimationFrame(function () {
|
||||
// 设置菜单主体内容
|
||||
instance.setStyle({
|
||||
'transition': 'transform ' + duration,
|
||||
'transform': 'translateX(0px)',
|
||||
'-webkit-transform': 'translateX(0px)'
|
||||
})
|
||||
// 设置各个隐藏按钮的收起状态
|
||||
for (var i = len - 1; i >= 0; i--) {
|
||||
buttons[i].setStyle({
|
||||
'transition': 'transform ' + duration,
|
||||
'transform': 'translateX(0px)',
|
||||
'-webkit-transform': 'translateX(0px)'
|
||||
})
|
||||
}
|
||||
})
|
||||
setStatus('close', instance, ownerInstance)
|
||||
}
|
||||
|
||||
// 标记菜单的当前状态，open - 打开 close - 关闭
|
||||
function setStatus(status, instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
state.status = status
|
||||
ownerInstance.callMethod('setStatus', status)
|
||||
}
|
||||
|
||||
// status的状态发生变化
|
||||
function statusChange(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
if (state.disabled) return
|
||||
// 打开或关闭单元格
|
||||
if (newValue === 'close' && state.status === 'open') {
|
||||
closeSwipeAction(instance, ownerInstance)
|
||||
} else if (newValue === 'open' && state.status === 'close') {
|
||||
openSwipeAction(instance, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单尺寸发生变化
|
||||
function sizeChange(newValue, oldValue, ownerInstance, instance) {
|
||||
// wxs内的局部变量快照
|
||||
var state = instance.getState()
|
||||
state.disabled = newValue.disabled
|
||||
state.duration = newValue.duration
|
||||
state.show = newValue.show
|
||||
state.threshold = newValue.threshold
|
||||
state.buttons = newValue.buttons
|
||||
|
||||
if (state.buttons) {
|
||||
var len = state.buttons.length
|
||||
var buttonsWidth = 0
|
||||
var buttons = newValue.buttons
|
||||
for (var i = 0; i < len; i++) {
|
||||
buttonsWidth += buttons[i].width
|
||||
}
|
||||
}
|
||||
state.buttonsWidth = buttonsWidth
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchStart: touchStart,
|
||||
touchMove: touchMove,
|
||||
touchEnd: touchEnd,
|
||||
sizeChange: sizeChange,
|
||||
statusChange: statusChange
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<view class="tn-swipe-action-item-class tn-swipe-action-item">
|
||||
<view class="tn-swipe-action-item__right">
|
||||
<slot name="button">
|
||||
<view
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
class="tn-swipe-action-item__right__button"
|
||||
:style="[{
|
||||
alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
|
||||
}]"
|
||||
@tap="buttonClickHandler(item, index)"
|
||||
>
|
||||
<view
|
||||
class="tn-swipe-action-item__right__button__wrapper"
|
||||
:style="[{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#AAAAAA',
|
||||
borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
|
||||
padding: item.style && item.style.borderRadius ? '0' : '0 30rpx'
|
||||
}, item.style]"
|
||||
>
|
||||
<view
|
||||
v-if="item.icon"
|
||||
:class="[`tn-icon-${item.icon}`]"
|
||||
:style="[{
|
||||
color: item.style && item.style.color ? item.style.color : '#FFFFFF',
|
||||
fontSize: item.iconSize ? item.iconSize + 'rpx' : item.style && item.style.fontSize ? (item.style.fontsize * 1.2) + 'rpx' : '34rpx',
|
||||
marginRight: item.text ? '4rpx' : 0
|
||||
}]"
|
||||
></view>
|
||||
<text
|
||||
v-if="item.text"
|
||||
class="tn-swipe-action-item__right__button__text tn-text-ellipsis"
|
||||
:style="[{
|
||||
color: item.style && item.style.color ? item.style.color : '#FFFFFF',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx',
|
||||
lineHeight: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx'
|
||||
}]"
|
||||
>{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="tn-swipe-action-item__content"
|
||||
:status="status"
|
||||
:size="size"
|
||||
:change:status="wxs.statusChange"
|
||||
:change:size="wxs.sizeChange"
|
||||
@touchstart="wxs.touchStart"
|
||||
@touchmove="wxs.touchMove"
|
||||
@touchend="wxs.touchEnd"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
|
||||
<script src="./index.wxs" module="wxs" lang="wxs"></script>
|
||||
<!-- #endif -->
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'tn-swipe-action-item',
|
||||
props: {
|
||||
// 是否显示滑动菜单
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 标识符，如果是v-for可用index的索引值
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 右侧按钮内容
|
||||
options: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否自动关闭其他swipe按钮组
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 滑动距离阈值，大于此值才会打开菜单
|
||||
threshold: {
|
||||
type: Number,
|
||||
default: 60
|
||||
},
|
||||
// 动画过渡时间，单位ms
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
|
||||
itemData() {
|
||||
return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮尺寸信息
|
||||
size: {},
|
||||
// 父组件参数
|
||||
parentData: {
|
||||
autoClose: true
|
||||
},
|
||||
// 当前状态
|
||||
status: 'close'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData() {
|
||||
this.queryRect()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.parent = false
|
||||
this.updateParentData()
|
||||
this.parent && this.parent.children.push(this)
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.queryRect()
|
||||
},
|
||||
// 更新父组件信息
|
||||
updateParentData() {
|
||||
this.getParentData('tn-swipe-action')
|
||||
},
|
||||
// 查询节点
|
||||
queryRect() {
|
||||
this._tGetRect('.tn-swipe-action-item__right__button', true).then(res => {
|
||||
this.size = {
|
||||
buttons: res,
|
||||
show: this.show,
|
||||
disabled: this.disabled,
|
||||
threshold: this.threshold,
|
||||
duration: this.duration
|
||||
}
|
||||
})
|
||||
},
|
||||
// 按钮点击
|
||||
buttonClickHandler(item, index) {
|
||||
this.$emit('click', {
|
||||
type: 'button',
|
||||
index
|
||||
})
|
||||
},
|
||||
// item点击
|
||||
handlerItemClick() {
|
||||
this.$emit('click', {
|
||||
type: 'item',
|
||||
name: this.name
|
||||
})
|
||||
},
|
||||
// 关闭时执行
|
||||
closeHandler() {
|
||||
this.status = 'close'
|
||||
},
|
||||
// 设置状态
|
||||
setStatus(status) {
|
||||
this.status = status
|
||||
},
|
||||
// 关闭其他单元格
|
||||
closeOther() {
|
||||
this.parent && this.parent.closeOther(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-swipe-action-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// touch-action: none;
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
background-color: #FFFFFF;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user