Skip to content

E
ec-report-refactor
Commit 18acb150 authored by leon's avatar leon
Browse files
Options

feat: popup data add swipe

parent 09cd0288
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 91 deletions
components/HorizontalBar/HorizontalBar.vue
View file @ 18acb150
......@@ -91,10 +91,11 @@ export default {
current: event.dataIndex,
urls: urls
})
} else if (popup) {
} else if (popup) {
uni.$emit('showBarDetail', {
popupShow: true,
popupData: data[event.dataIndex],
popupData: data,
currentIndex: event.dataIndex,
customRender
})
} else {
......
components/ModelData/ModelData.vue
View file @ 18acb150
<template>
<u-modal
class="model-data"
v-model="popupShow"
:closeOnClickOverlay="true"
title="明细"
@close="close"
@confirm="close"
>
<view class="slot-content">
<view v-for="(val, key) in popupData" 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"
style="width: 100%"
@click="seeImage(val)"
></u-image>
</template>
<view v-else class="data-val ellipsis">{{ val }}</view>
</view>
</view>
</u-modal>
</template>
<script>
export default {
name: 'ModelData',
data() {
return {}
},
props: {
popupData: {
type: Object,
default: () => {}
},
popupShow: {
type: Boolean,
default: false
},
customRender: {
type: Object,
default: () => {}
}
},
methods: {
close() {
uni.$emit('showBarDetail', {
popupShow: false,
popupData: {}
})
},
seeImage(url) {
uni.previewImage({
current: 0,
urls: [url]
})
}
}
}
</script>
<style scoped>
.model-data {
position: relative;
z-index: 9999999;
}
.slot-content {
margin: 10px;
font-size: 12px;
border: 1px solid #eee;
border-radius: 5px;
}
.data-view {
display: flex;
align-self: center;
border-bottom: 1px solid #eee;
padding: 5px;
}
.data-key {
min-width: 28%;
margin-right: 10px;
border-right: 1px solid #eee;
}
<template>
<u-modal class="model-data" v-model="popupShow" :closeOnClickOverlay="true" title="明细" @close="close"
@confirm="close">
<view class="slot-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
:animation="animationData">
<view v-for="(val, key) in popupObject" 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" style="width: 100%"
@click="seeImage(key)"></u-image>
</template>
<view v-else class="data-val ellipsis">{{ val }}</view>
</view>
</view>
</u-modal>
</template>
<script>
export default {
name: 'ModelData',
data() {
return {
// popupObject: {},
startX: 0, //滑动开始x轴位置
startY: 0, //滑动开始y轴位置
moveX: 0, //滑动的x轴距离
moveY: 0, //滑动的y轴距离
like_state: 0, //-1：左滑，0：没滑动，1：右滑
animationData: {},
index: 0,
}
},
props: {
popupData: {
type: Array,
default: () => []
},
currentIndex: {
tyep: Number,
default: 0
},
popupShow: {
type: Boolean,
default: false
},
customRender: {
type: Object,
default: () => {}
}
},
created() {
this.animation = uni.createAnimation({
timingFunction: 'ease',
duration: 120
})
},
computed: {
popupObject: {
get() {
this.index = this.currentIndex
return this.popupData[this.currentIndex]
},
set(val) {
return val
}
}
},
methods: {
close() {
uni.$emit('showBarDetail', {
popupShow: false,
popupData: []
})
},
seeImage(key) {
var images = []
this.popupData.forEach(item => {
images.push(item[key])
})
uni.previewImage({
current: this.index,
urls: images
})
},
touchStart(event) {
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 < -10) {
state = 1;
} else if (moveX > 10) {
state = -1;
}
}
this.like_state = state;
this.moveX = moveX;
this.moveY = moveY;
},
touchEnd(event) {
if (Math.abs(this.moveX) > 60 && 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: 10
})
.translateX('100%').step({
duration: 10
})
.translateX(0).opacity(1).step()
this.animationData = this.animation.export()
// 为避免uniapp动画只有第一次生效，必须延迟删除动画实例数据
setTimeout(() => {
this.animationData = {}
}, 250)
this.index += 1
}
if (state === -1 && this.index > 0) {
this.animation.translateX('100%').step()
.opacity(0).step({
duration: 10
})
.translateX('-100%').step({
duration: 10
})
.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>
<style scoped>
.model-data {
position: relative;
z-index: 9999999;
}
.slot-content {
margin: 10px;
font-size: 12px;
border: 1px solid #eee;
border-radius: 5px;
}
.data-view {
display: flex;
align-self: center;
border-bottom: 1px solid #eee;
padding: 5px;
}
.data-key {
min-width: 28%;
margin-right: 10px;
border-right: 1px solid #eee;
}
</style>
pages/index/index.vue
View file @ 18acb150
......@@ -64,6 +64,7 @@
style="position: relative;z-index: 99999;"
:popupShow="popupShow"
:popupData="popupData"
:currentIndex="currentIndex"
:customRender="customRender"
></ModelData>
</view>
......@@ -80,7 +81,8 @@
horizontalBarHeight: 0,
popupShow: false,
popupData: {},
customRender: {}
customRender: {},
currentIndex: 0
}
},
computed: {
......@@ -156,9 +158,10 @@
that.horizontalBarHeight = height
})
uni.$on('showBarDetail', data => {
const { popupShow, popupData, customRender } = data
const { popupShow, popupData, customRender, currentIndex } = data
that.popupShow = popupShow
that.popupData = popupData
that.currentIndex = currentIndex
that.customRender = customRender
})
},
......
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