Skip to content

E
ec-report-refactor
Commit 9b358fe8 authored by Jenny's avatar Jenny
Browse files
Options

feat: 弹框滑动

parent c7082bdb
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 181 deletions
components/ModelData/ModelData.vue
View file @ 9b358fe8
<template> <template>
<u-modal class="model-data" v-model="show" title="明细" @close="close" <u-modal
@confirm="close"> class="model-data"
<view class="slot-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" v-model="show"
:animation="animationData"> title="明细"
<view v-for="(val, key) in popupObject" :key="key" class="data-view"> @close="close"
<view class="data-key ellipsis">{{ key }}</view> @confirm="close"
<template v-if="customRender[key] === 'picture'"> >
<u-image :height="100" mode="aspectFit" :src="val" crossOrigin="anonymous" style="width: 100%" <view class="slot-content">
@click="seeImage(key)"></u-image> <swiper
</template> class="swiper"
<view v-else class="data-val ellipsis">{{ val }}</view> circular
</view> :current="currentIndex"
</view> :style="{ height: `${height}px` }"
</u-modal> >
<swiper-item v-for="item in popupData">
<view v-for="(val, key) in item" :key="key" class="data-view">
<view class="data-key ellipsis">{{ key }}</view>
<template v-if="customRender[key] === 'picture'">
<u-image
:height="100"
mode="aspectFit"
:src="val"
crossOrigin="anonymous"
class="data-image"
@click="seeImage(key)"
></u-image>
</template>
<view v-else class="data-val ellipsis">{{ val }}</view>
</view>
</swiper-item>
</swiper>
</view>
</u-modal>
</template> </template>
<script> <script>
export default { export default {
name: 'ModelData', name: 'ModelData',
data() { data() {
return { return {}
// popupObject: {}, },
startX: 0, //滑动开始x轴位置 props: {
startY: 0, //滑动开始y轴位置 popupData: {
moveX: 0, //滑动的x轴距离 type: Array,
moveY: 0, //滑动的y轴距离 default: () => []
like_state: 0, //-1：左滑，0：没滑动，1：右滑 },
animationData: {}, currentIndex: {
index: -1, tyep: Number,
} default: 0
}, },
props: { popupShow: {
popupData: { type: Boolean,
type: Array, default: false
default: () => [] },
}, customRender: {
currentIndex: { type: Object,
tyep: Number, default: () => {}
default: 0 }
}, },
popupShow: { created() {},
type: Boolean, computed: {
default: false show: {
}, get() {
customRender: { return this.popupShow
type: Object, },
default: () => {} set(val) {
} return val
}, }
created() { },
this.animation = uni.createAnimation({ height() {
timingFunction: 'ease', const keys = Object.keys(this.popupData[0])
duration: 120 const customRenderKeys = Object.keys(this.customRender)
}) return keys.length * 30 + customRenderKeys.length * 50
}, }
computed: { },
popupObject: {
get() {
return this.popupData[this.currentIndex]
},
set(val) {
return val
}
},
show: {
get() {
return this.popupShow
},
set(val) {
return val
}
}
},
methods: {
close() {
this.index = -1
this.$emit('close')
},
seeImage(key) {
if(this.index === -1) {
this.index = this.currentIndex
}
var images = []
this.popupData.forEach(item => {
images.push(item[key])
})
uni.previewImage({
current: this.index,
urls: images
})
// 图片查看弹窗会使页面close，所以需要把index置为-1
this.index = -1
},
touchStart(event) {
if(this.index === -1) {
this.index = this.currentIndex
}
this.startX = event.touches[0].pageX;
this.startY = event.touches[0].pageY;
},
touchMove(event) {
var currentX = event.touches[0].pageX;
var currentY = event.touches[0].pageY;
var moveX = currentX - this.startX;
var moveY = currentY - this.startY;
var state = 0; //-1：左滑，0：没滑动，1：右滑
// //左右方向滑动
if (Math.abs(moveX) > Math.abs(moveY)) {
if (moveX < -40) {
state = 1;
} else if (moveX > 40) {
state = -1;
}
}
this.like_state = state;
this.moveX = moveX;
this.moveY = moveY;
},
touchEnd(event) {
if (Math.abs(this.moveX) > 40 && this.like_state != -100) { var state = this.like_state
this.like_state = -100 //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
//这里放需要进行的业务逻辑
if (state === 1 && this.index < this.popupData.length - 1) {
this.animation.translateX('-100%').step()
.opacity(0).step({
duration: 50
})
.translateX('100%').step({
duration: 50
})
.translateX(0).opacity(1).step()
this.animationData = this.animation.export() methods: {
// 为避免uniapp动画只有第一次生效，必须延迟删除动画实例数据 close() {
setTimeout(() => { this.$emit('close')
this.animationData = {} },
}, 250) seeImage(key) {
this.index += 1 uni.previewImage({
this.$set(this.popupObject, '', this.popupData[this.index]) current: this.index,
} urls: images
if (state === -1 && this.index > 0) { })
this.animation.translateX('100%').step() }
.opacity(0).step({ }
duration: 50 }
})
.translateX('-100%').step({
duration: 50
})
.translateX(0).opacity(1).step()
this.animationData = this.animation.export()
// 为避免uniapp动画只有第一次生效，必须延迟删除动画实例数据
setTimeout(() => {
this.animationData = {}
}, 250)
this.index -= 1
this.$set(this.popupObject, '', this.popupData[this.index])
}
}
}
}
}
</script> </script>
<style scoped> <style scoped>
.model-data { .model-data {
position: relative; position: relative;
z-index: 9999999; z-index: 9999999;
} }
.slot-content { .slot-content {
margin: 10px; margin: 10px;
font-size: 12px; font-size: 12px;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 5px; border-radius: 5px;
} }
.data-view { .data-view {
display: flex; display: flex;
align-self: center; align-self: center;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding: 5px; line-height: 30px;
} padding: 0 5px;
}
.data-key { .data-key {
min-width: 28%; min-width: 28%;
margin-right: 10px; margin-right: 10px;
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
.data-image {
width: 100%;
}
.swiper {
overflow-y: auto;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment