created
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
<style lang="scss">
|
||||
.hqs-popup {
|
||||
.qs-con {
|
||||
background: #fff;
|
||||
}
|
||||
.qs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.qs-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.hidden { visibility: hidden; }
|
||||
.qs-side {
|
||||
min-width: 60px;
|
||||
padding: 15px 20px;
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
&:active { opacity: .8; }
|
||||
}
|
||||
.qs-h-scroll {
|
||||
height: 100vh;
|
||||
// #ifdef H5
|
||||
margin-top: 44px;
|
||||
height: calc(100vh - 44px);
|
||||
// #endif
|
||||
}
|
||||
.ta-r { text-align: right; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<uni-popup ref="popup"
|
||||
:mask-click="maskClick" @change="onChange"
|
||||
:type="from" class="hqs-popup">
|
||||
<view class="qs-con"
|
||||
:style="conStyle"
|
||||
@mousedown="onTouch" @mousemove="onTouch" @mouseup="onTouch"
|
||||
@touchstart="onTouch" @touchmove="onTouch" @touchend="onTouch">
|
||||
<block v-if="isVertical">
|
||||
<view class="qs-header" v-if="from == 'bottom' && showHeader">
|
||||
<view class="qs-side" :class="{'hidden': !showBack && !$slots.back}"
|
||||
@click="onBack">
|
||||
<slot name="back">
|
||||
<text>返回</text>
|
||||
</slot>
|
||||
</view>
|
||||
<slot name="title">
|
||||
<text class="qs-title">{{ title }}</text>
|
||||
</slot>
|
||||
<view class="qs-side ta-r" :class="{'hidden': !showClose}"
|
||||
@click="close">
|
||||
<slot name="close">
|
||||
<u-icon :name="closeIcon" :size="32" v-if="closeIcon"></u-icon>
|
||||
<text v-else>关闭</text>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<slot name="sub-header"></slot>
|
||||
<scroll-view scroll-y :style="{ height }"
|
||||
@scroll="onScroll">
|
||||
<view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<slot name="bottom"></slot>
|
||||
</block>
|
||||
<block v-else-if="!isVertical">
|
||||
<scroll-view scroll-y class="qs-h-scroll" :style="{ width }">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
</block>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UniPopup from './uni-popup.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UniPopup,
|
||||
},
|
||||
props: {
|
||||
// 弹窗显示可通过v-model控制
|
||||
value: Boolean,
|
||||
|
||||
// 弹窗打开开始方向
|
||||
from: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
|
||||
// 内容区边缘圆角大小
|
||||
round: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
// 弹窗内容宽度(当from=left或right时起作用)
|
||||
width: {
|
||||
type: String,
|
||||
default: '60vw',
|
||||
},
|
||||
// 弹窗内容高度(当from=top或bottom时起作用)
|
||||
height: {
|
||||
type: String,
|
||||
default: '50vh',
|
||||
},
|
||||
|
||||
// 显示默认头部标题栏（仅在底部弹出时有）
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 弹窗标题
|
||||
title: String,
|
||||
|
||||
// 显示左侧（返回）按钮，如果v-slot:back存在时，也会显示此按钮
|
||||
showBack: Boolean,
|
||||
|
||||
// 显示关闭按钮，如果是字符串，将作为uview（需另外引入）的u-icon组件的name（如showClose="close"，会显示close图标）
|
||||
showClose: {
|
||||
type: [Boolean, String],
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 是否可点击模态背景关闭弹窗
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
panStyle: '',
|
||||
showPopup: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
closeIcon() {
|
||||
if(typeof this.showClose == 'string') return this.showClose
|
||||
return false
|
||||
},
|
||||
isVertical() {
|
||||
return ['bottom', 'top'].includes(this.from)
|
||||
},
|
||||
conStyle() {
|
||||
let style = this.panStyle || ''
|
||||
let r = this.round
|
||||
if(r > 0) {
|
||||
r += 'px'
|
||||
if(this.from == 'bottom') r = [r, r, 0, 0]
|
||||
else if(this.from == 'left') r = [0, r, r, 0]
|
||||
else if(this.from == 'right') r = [r, 0, 0, r]
|
||||
else r = [0, 0, r, r]
|
||||
style += `border-radius: ${r.join(' ')};`
|
||||
}
|
||||
return style
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if(val == this.showPopup) return
|
||||
if(val) this.open()
|
||||
else this.close()
|
||||
},
|
||||
showPopup(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if(this.value) this.open()
|
||||
},
|
||||
methods: {
|
||||
onScroll(e) {
|
||||
this.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
onTouch(ev) {
|
||||
// if(!this.maskClick) return
|
||||
const { pageX, pageY } = ev.changedTouches[0] || ev
|
||||
if(['touchstart', 'mousedown'].includes(ev.type)) {
|
||||
this.startX = pageX
|
||||
this.startY = pageY
|
||||
this.startTime = ev.timeStamp
|
||||
} else {
|
||||
if(!this.startTime) return
|
||||
const orien = this.isVertical ? 'Y' : 'X'
|
||||
let moveDis = pageY - this.startY
|
||||
if(this.from == 'left') moveDis = this.startX - pageX
|
||||
else if(this.from == 'right') moveDis = pageX - this.startX
|
||||
else if(this.from == 'top') moveDis = -moveDis
|
||||
if(!this.maskClick) moveDis /= 3
|
||||
const duration = (ev.timeStamp - this.startTime)
|
||||
const speed = moveDis/duration
|
||||
if(['touchend', 'mouseup'].includes(ev.type)) {
|
||||
if(this.panStyle) {
|
||||
if(this.maskClick && (moveDis > 120 || speed > 0.25)) {
|
||||
this.close()
|
||||
}
|
||||
else {
|
||||
this.panStyle = `transform: translate${orien}(0); transition: all ease 200ms;`
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.panStyle = ''
|
||||
}, 300)
|
||||
}
|
||||
// conScrollTop = 0
|
||||
this.startTime = 0
|
||||
return
|
||||
}
|
||||
// if(this.scrollTop > 0) return
|
||||
|
||||
if(moveDis > 0) {
|
||||
if(this.from == 'left' || this.from == 'top') moveDis *= -1
|
||||
this.panStyle = `transform: translate${orien}(${moveDis}px); transition: none;`
|
||||
}
|
||||
}
|
||||
},
|
||||
onChange({ show }) {
|
||||
this.showPopup = show
|
||||
},
|
||||
open() {
|
||||
this.$refs.popup.open()
|
||||
this.showPopup = true
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
this.showPopup = false
|
||||
},
|
||||
onBack() {
|
||||
this.$emit('back')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
|
||||
<uni-transition :mode-class="['fade']" :styles="maskClass"
|
||||
:duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition :mode-class="ani" :styles="transClass"
|
||||
:duration="duration" :show="showTrans">
|
||||
<view class="uni-popup__wrapper-box">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniTransition from './uni-transition.vue'
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value left 左边弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @property {Boolean} animation = [ture|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniPopup',
|
||||
components: {
|
||||
uniTransition
|
||||
},
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
maskClass: {
|
||||
'position': 'fixed',
|
||||
'bottom': 0,
|
||||
'top': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler: function(newVal) {
|
||||
switch (this.type) {
|
||||
case 'top':
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
break
|
||||
case 'left':
|
||||
this.ani = ['slide-left']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'top': 0,
|
||||
'left': 0,
|
||||
'bottom': 0,
|
||||
}
|
||||
break
|
||||
case 'right':
|
||||
this.ani = ['slide-right']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'top': 0,
|
||||
'right': 0,
|
||||
'bottom': 0,
|
||||
}
|
||||
break
|
||||
case 'bottom':
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'bottom': 0
|
||||
}
|
||||
break
|
||||
case 'center':
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
'display': 'flex',
|
||||
'flexDirection': 'column',
|
||||
/* #endif */
|
||||
'bottom': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'top': 0,
|
||||
'justifyContent': 'center',
|
||||
'alignItems': 'center'
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear(e) {
|
||||
// TODO nvue 取消冒泡
|
||||
e.stopPropagation()
|
||||
},
|
||||
open() {
|
||||
this.showPopup = true
|
||||
this.$nextTick(() => {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.showTrans = true
|
||||
}, 50);
|
||||
})
|
||||
this.$emit('change', {
|
||||
show: true
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$nextTick(() => {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.$emit('change', {
|
||||
show: false
|
||||
})
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
onTap() {
|
||||
if (!this.maskClick) return
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 900;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $uni-bg-color-mask;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mask-ani {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.uni-top-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-bottom-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-center-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(500px);
|
||||
}
|
||||
|
||||
.center {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-ani {
|
||||
// transition: transform 0.3s;
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.uni-top-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-bottom-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-center-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
||||
@click="change">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
/**
|
||||
* Transition 过渡动画
|
||||
* @description 简单过渡动画组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {Number} duration 过渡动画持续时间
|
||||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTransition',
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
ani: { in: '',
|
||||
active: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
}
|
||||
let transfrom = ''
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i)
|
||||
transfrom += line + ':' + styles[i] + ';'
|
||||
}
|
||||
return transfrom
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.timer = null
|
||||
// this.nextTick = (time = 50) => new Promise(resolve => {
|
||||
// clearTimeout(this.timer)
|
||||
// this.timer = setTimeout(resolve, time)
|
||||
// return this.timer
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
open() {
|
||||
clearTimeout(this.timer)
|
||||
this.isShow = true
|
||||
this.transform = ''
|
||||
this.ani.in = ''
|
||||
for (let i in this.getTranfrom(false)) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = 'fade-in'
|
||||
} else {
|
||||
this.transform += `${this.getTranfrom(false)[i]} `
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this._animation(true)
|
||||
}, 50)
|
||||
})
|
||||
|
||||
},
|
||||
close(type) {
|
||||
clearTimeout(this.timer)
|
||||
this._animation(false)
|
||||
},
|
||||
_animation(type) {
|
||||
let styles = this.getTranfrom(type)
|
||||
// #ifdef APP-NVUE
|
||||
if(!this.$refs['ani']) return
|
||||
animation.transition(this.$refs['ani'].ref, {
|
||||
styles,
|
||||
duration: this.duration, //ms
|
||||
timingFunction: 'ease',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
}, () => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.transform = ''
|
||||
for (let i in styles) {
|
||||
if (i === 'opacity') {
|
||||
this.ani.in = `fade-${type?'out':'in'}`
|
||||
} else {
|
||||
this.transform += `${styles[i]} `
|
||||
}
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
if (!type) {
|
||||
this.isShow = false
|
||||
}
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
|
||||
}, this.duration)
|
||||
// #endif
|
||||
|
||||
},
|
||||
getTranfrom(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
}
|
||||
this.modeClass.forEach((mode) => {
|
||||
switch (mode) {
|
||||
case 'fade':
|
||||
styles.opacity = type ? 1 : 0
|
||||
break;
|
||||
case 'slide-top':
|
||||
styles.transform += `translateY(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'slide-right':
|
||||
styles.transform += `translateX(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-bottom':
|
||||
styles.transform += `translateY(${type?'0':'100%'}) `
|
||||
break;
|
||||
case 'slide-left':
|
||||
styles.transform += `translateX(${type?'0':'-100%'}) `
|
||||
break;
|
||||
case 'zoom-in':
|
||||
styles.transform += `scale(${type?1:0.8}) `
|
||||
break;
|
||||
case 'zoom-out':
|
||||
styles.transform += `scale(${type?1:1.2}) `
|
||||
break;
|
||||
}
|
||||
})
|
||||
return styles
|
||||
},
|
||||
_modeClassArr(type) {
|
||||
let mode = this.modeClass
|
||||
if (typeof(mode) !== "string") {
|
||||
let modestr = ''
|
||||
mode.forEach((item) => {
|
||||
modestr += (item + '-' + type + ',')
|
||||
})
|
||||
return modestr.substr(0, modestr.length - 1)
|
||||
} else {
|
||||
return mode + '-' + type
|
||||
}
|
||||
},
|
||||
// getEl(el) {
|
||||
// console.log(el || el.ref || null);
|
||||
// return el || el.ref || null
|
||||
// },
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-transition {
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slide-top-in {
|
||||
/* transition-property: transform, opacity; */
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.slide-top-active {
|
||||
transform: translateY(0);
|
||||
/* opacity: 1; */
|
||||
}
|
||||
|
||||
.slide-right-in {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-right-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-bottom-in {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.slide-bottom-active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.slide-left-in {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-left-active {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zoom-in-in {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.zoom-out-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.zoom-out-in {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<scroll-view
|
||||
class="container"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<view class="" v-if="dataType === 'template'">
|
||||
<view class="list-container">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
>
|
||||
<view class="" v-if="item.src !== 'not_image'">
|
||||
<view @click="select(item._id)"
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'item-image': true
|
||||
}">
|
||||
<cloud-image
|
||||
:src="item.src"
|
||||
mode="scaleToFill"
|
||||
width="33vw"
|
||||
height="100%"
|
||||
>
|
||||
</cloud-image>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<view
|
||||
@click="select(item._id)"
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'item-image': true
|
||||
}">
|
||||
<view style="width: 33vw;height:100%;background-color: aqua;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else-if="dataType === 'music'">
|
||||
<view class="list-container">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
>
|
||||
|
||||
<view class="center-con" v-if="item.src !== 'not_music'">
|
||||
<view @click="select(item._id)"
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'music-item': true
|
||||
}">
|
||||
<cloud-image
|
||||
:src="item.src"
|
||||
mode="scaleToFill"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
</cloud-image>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
<view class="center-con" v-else>
|
||||
<view
|
||||
:class="{
|
||||
'select-image': selectValue === item._id,
|
||||
'music-item': true
|
||||
}">
|
||||
<view style="width: 100%;height:100%;background-color: aqua;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<text class="item-text">{{ item.value }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 加载状态提示 -->
|
||||
<view class="loading-tips">
|
||||
<text v-if="loading">正在加载...</text>
|
||||
<text v-if="noMore">没有更多了~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const db = uniCloud.database();
|
||||
import cloudImage from "@/components/cloud-image.vue";
|
||||
export default {
|
||||
components: {
|
||||
cloudImage,
|
||||
},
|
||||
props: {
|
||||
// 初始数据（可选）
|
||||
dataType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 每页数量
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
currentTemplate: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
|
||||
],
|
||||
selectValue: "",
|
||||
page: 12,
|
||||
loading: false,
|
||||
noMore: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if(this.list.length === 0) {
|
||||
if (this.dataType === "template") {
|
||||
this.list = [
|
||||
{
|
||||
value: "不使用模板",
|
||||
_id: "",
|
||||
src: "not_image"
|
||||
},
|
||||
]
|
||||
} else if(this.dataType === "music") {
|
||||
this.list = [
|
||||
{
|
||||
value: "不播放音乐",
|
||||
_id: "",
|
||||
src: "not_music"
|
||||
}
|
||||
]
|
||||
} else if(this.dataType === "font") {
|
||||
|
||||
}
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
select(id) {
|
||||
this.selectValue = id;
|
||||
this.$emit('update', this.selectValue);
|
||||
},
|
||||
async loadData() {
|
||||
if (this.loading || this.noMore) return;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
if (this.dataType === "template") {
|
||||
console.log(this.list)
|
||||
if (this.list.length === 1) {
|
||||
let res = await db.collection("cms-temp").get();
|
||||
console.log(res.result.data)
|
||||
let lst = [];
|
||||
for (let i = 0 ; i < res.result.data.length ; i++ ) {
|
||||
lst.push({
|
||||
value:res.result.data[i].temptele_name,
|
||||
_id: res.result.data[i]._id,
|
||||
src: res.result.data[i].temptele_src
|
||||
})
|
||||
}
|
||||
this.list.push(...lst);
|
||||
await this.select(this.list[0]._id)
|
||||
this.noMore = true
|
||||
}
|
||||
|
||||
} else if (this.dataType === "music") {
|
||||
await this.select(this.list[0]._id)
|
||||
this.noMore = true
|
||||
} else if (this.dataType === "font" ) {
|
||||
|
||||
} else {
|
||||
this.noMore = true
|
||||
}
|
||||
},
|
||||
loadMore() {
|
||||
if (!this.noMore) {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
|
||||
previewImage(current) {
|
||||
uni.previewImage({
|
||||
current,
|
||||
urls: this.list.map(item => item.image)
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
width: 33%;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 100%;
|
||||
height: 250rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
display: block;
|
||||
padding: 20rpx 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-tips {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.select-image {
|
||||
box-sizing: border-box;
|
||||
border: 10rpx solid #3399ff;
|
||||
}
|
||||
|
||||
.music-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user