374 lines
13 KiB
Vue
374 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<view class="contentBox" v-if="list.length" @click="toEmit()"
|
||
:style="'color:' + color + ';background-color:' + backgroundColor + ';height:' + height+'rpx;'">
|
||
<view v-if="showIcon" class="supBox">
|
||
<lwIcon :size="32" :color="iconColor" icon="sound"></lwIcon>
|
||
</view>
|
||
<view v-if="list.length > 1" class="content">
|
||
<view v-for="(item, index) in list" :key="index" @tap.stop="dangGao(index)">
|
||
<view class="loopItemBase" :class="index==0&&firstIn?'fistInClass':''"
|
||
:animation="realAnimation(index)" v-if="aindexArr.includes(index)"
|
||
:style="'line-height:'+height+'rpx;'">
|
||
{{ item }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="list.length == 1" class="content">
|
||
<view :style="'line-height:'+height+'rpx;'" @tap.stop="dangGao(0)" class="loopItemBaseShow">{{ list[0] }}</view>
|
||
</view>
|
||
<view v-if="showMore" class="offBox">
|
||
<lwIcon :size="32" :color="moreColor" icon="arrowright"></lwIcon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/*
|
||
lw-notice公告上下轮询组件（组件内依赖了自有的字体图标组件，可自行替换为uni或自身项目的图标组件）
|
||
color:字体颜色
|
||
backgroundColor:背景色
|
||
list:要循环的列表数据
|
||
height:组件高度
|
||
showScale:是否有缩放动画
|
||
runTime:间隔切换时间
|
||
showIcon:是否显示头部小喇叭
|
||
iconColor:小喇叭的颜色
|
||
showMore:是否显示尾部更多
|
||
moreColor:显示更多的颜色
|
||
*/
|
||
import lwIcon from './iconFont.vue'
|
||
export default {
|
||
components: {
|
||
lwIcon
|
||
},
|
||
props: {
|
||
color: {
|
||
type: String,
|
||
default: '#666666'
|
||
},
|
||
backgroundColor: {
|
||
type: String,
|
||
default: '#f5f5f5'
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: function(){
|
||
return []
|
||
}
|
||
},
|
||
height: {
|
||
type: Number,
|
||
default: 80
|
||
},
|
||
showScale: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
runTime: {
|
||
type: Number,
|
||
default: 4000
|
||
},
|
||
showIcon: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showMore: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
iconColor: {
|
||
type: String,
|
||
default: '#aaaaaa'
|
||
},
|
||
moreColor: {
|
||
type: String,
|
||
default: '#aaaaaa'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 第一次展示
|
||
firstIn: true,
|
||
// 当前显示的项
|
||
aindexArr: [],
|
||
// 创建动画的实例
|
||
animation: null,
|
||
// 动画对象一
|
||
animationData: null,
|
||
// 动画对象二
|
||
animationDataTwo: null,
|
||
// 显示项和动画之间的映射关系
|
||
indexLinkAnimationObj: {},
|
||
setTimerOne: null,
|
||
setTimerTwo: null,
|
||
setTimerThree: null,
|
||
setTimerFour: null,
|
||
setTimerFive: null
|
||
};
|
||
},
|
||
beforeDestroy() {
|
||
this.resetPage()
|
||
},
|
||
computed: {
|
||
// 计算展示项应该展示的动画
|
||
realAnimation() {
|
||
return function(value) {
|
||
if (this.indexLinkAnimationObj[value]) {
|
||
return this[this.indexLinkAnimationObj[value]]
|
||
} else {
|
||
return {}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 开始 按3000毫秒的运行示例图
|
||
// 1.a显示 执行动画1 锁定动画1 0ms
|
||
// 2.b显示 执行动画2 锁定动画2 200ms
|
||
// 3.a隐藏 停止动画1 释放动画1 300ms
|
||
// 4.c显示 执行动画1 锁定动画1 400ms
|
||
// 5.b隐藏 停止动画2 释放动画2 500ms
|
||
// 6.a显示 执行动画2 锁定动画2 600ms
|
||
// 7.c隐藏 停止动画1 释放动画1 700ms
|
||
// 8.b显示 执行动画1 锁定动画1 800ms
|
||
// 9.a隐藏 停止动画2 释放动画2 900ms
|
||
// 10.c显示 执行动画2 锁定动画2 1000ms
|
||
initPage() {
|
||
this.resetPage();
|
||
if (this.list && this.list.length) {
|
||
if (this.list.length > 1) {
|
||
this.aindexArr.push(0);
|
||
this.animation = uni.createAnimation({
|
||
timingFunction: 'linear',
|
||
})
|
||
// #ifdef H5
|
||
this.animationDataH5 = this.animation.translateY(-100).step({
|
||
duration: 10000
|
||
}).export()
|
||
// #endif
|
||
this.runAnimation(0, true);
|
||
}
|
||
}
|
||
},
|
||
// 重置页面动画
|
||
resetPage() {
|
||
// 移除所有定时器
|
||
clearTimeout(this.setTimerOne);
|
||
clearTimeout(this.setTimerTwo);
|
||
clearTimeout(this.setTimerThree);
|
||
clearTimeout(this.setTimerFour);
|
||
clearTimeout(this.setTimerFive);
|
||
// 重置页面属性
|
||
this.aindexArr = [];
|
||
this.animation = null;
|
||
this.animationData = null;
|
||
this.animationDataTwo = null;
|
||
this.indexLinkAnimationObj = {};
|
||
},
|
||
// 执行动画方法(此方法内不要清除赋值的定时器)
|
||
runAnimation(value, firstIn) {
|
||
let that = this;
|
||
if (!firstIn) {
|
||
that.aindexArr.push(value);
|
||
}
|
||
// 获取执行动画对象
|
||
let lockText = that.createAni(firstIn);
|
||
// 延迟50毫秒执行(等待dom渲染)
|
||
that.setTimerOne = setTimeout(() => {
|
||
// 创建执行动画和执行方之间的映射关系
|
||
that.indexLinkAnimationObj[value] = lockText;
|
||
// console.log('已经创建完成绑定关系')
|
||
// console.log(that.indexLinkAnimationObj)
|
||
// 获取基础执行时间单位
|
||
let unitRunTime = (that.runTime - 50) / 6;
|
||
let waitTime = firstIn ? unitRunTime * 4 : unitRunTime * 5;
|
||
let waitTimeTwo = firstIn ? (that.runTime - unitRunTime) : that.runTime;
|
||
// #ifdef H5
|
||
waitTimeTwo = firstIn ? (that.runTime - (1.5 * unitRunTime)) : that.runTime;
|
||
//H5重新刷新一下动画绑定关系
|
||
if (firstIn) {
|
||
that.aindexArr.splice(0, 1);
|
||
that.aindexArr.push(0);
|
||
}
|
||
// #endif
|
||
|
||
// 开启下一个动画
|
||
that.setTimerTwo = setTimeout(() => {
|
||
let Index = value == that.list.length - 1 ? 0 : value + 1;
|
||
that.runAnimation(Index)
|
||
}, waitTime)
|
||
// 释放上一个执行方
|
||
that.setTimerThree = setTimeout(() => {
|
||
let index = that.aindexArr.indexOf(value);
|
||
that.aindexArr.splice(index, 1)
|
||
that.firstIn = false;
|
||
delete that.indexLinkAnimationObj[value]
|
||
}, waitTimeTwo)
|
||
}, 50)
|
||
},
|
||
// 创建动画方法
|
||
createAni(firstIn) {
|
||
let that = this;
|
||
let unitRunTime = (that.runTime - 50) / 6;
|
||
|
||
let delayTime = unitRunTime * 4;
|
||
let durationTime = unitRunTime;
|
||
let dispairTime = unitRunTime;
|
||
// #ifdef H5
|
||
delayTime = unitRunTime * 3.5;
|
||
dispairTime = unitRunTime * 1.5;
|
||
// #endif
|
||
|
||
let showTransformHeight = -uni.upx2px(that.height);
|
||
let hideTransformHeight = showTransformHeight * 2;
|
||
// 创建动画
|
||
if (that.showScale) {
|
||
if (firstIn) {
|
||
// that.animation.translateY(1).scale(1,1).step({ duration: 5 });
|
||
that.animation.translateY(showTransformHeight).scale(0.5, 0.5).step({
|
||
delay: delayTime,
|
||
duration: dispairTime
|
||
});
|
||
} else {
|
||
that.animation.translateY(showTransformHeight).scale(1, 1).step({
|
||
duration: durationTime
|
||
});
|
||
that.animation.translateY(hideTransformHeight).scale(0.5, 0.5).step({
|
||
delay: delayTime,
|
||
duration: dispairTime
|
||
});
|
||
}
|
||
} else {
|
||
if (firstIn) {
|
||
// that.animation.translateY(1).step({ duration: 5 });
|
||
that.animation.translateY(showTransformHeight).step({
|
||
delay: delayTime,
|
||
duration: dispairTime
|
||
});
|
||
} else {
|
||
that.animation.translateY(showTransformHeight).step({
|
||
duration: durationTime
|
||
});
|
||
that.animation.translateY(hideTransformHeight).step({
|
||
delay: delayTime,
|
||
duration: dispairTime
|
||
});
|
||
}
|
||
}
|
||
// 判断动画赋值项并赋值
|
||
if (!that.animationData) {
|
||
that.animationData = that.animation.export()
|
||
that.setTimerFour = setTimeout(() => {
|
||
clearTimeout(that.setTimerFour)
|
||
that.animationData = false;
|
||
}, that.runTime)
|
||
return 'animationData'
|
||
} else {
|
||
that.animationDataTwo = that.animation.export()
|
||
that.setTimerFive = setTimeout(() => {
|
||
clearTimeout(that.setTimerFive)
|
||
that.animationDataTwo = false;
|
||
}, that.runTime)
|
||
return 'animationDataTwo'
|
||
}
|
||
},
|
||
// 抛出点击事件
|
||
toEmit() {
|
||
let that = this
|
||
if (that.list.length == 1) {
|
||
that.$emit('itemClick', that.list[0])
|
||
} else {
|
||
that.$emit('itemClick', that.list[that.aindexArr[0]])
|
||
}
|
||
},
|
||
dangGao(index){
|
||
let that = this
|
||
if (that.list.length != 0) {
|
||
that.$emit('dangGao', index)
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
mounted() {
|
||
// 判断list有值后开启动画
|
||
// setTimeout()
|
||
this.initPage()
|
||
},
|
||
watch: {
|
||
list(value) {
|
||
this.initPage()
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contentBox {
|
||
width: 100%;
|
||
display: flex;
|
||
// padding: 0 20rpx;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
.supBox {
|
||
width: 50rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.offBox {
|
||
width: 50rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
flex-grow: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
overflow: hidden;
|
||
position: relative;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
justify-content: center;
|
||
|
||
.loopItemBase {
|
||
left: 0;
|
||
top: 100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
position: absolute;
|
||
white-space: nowrap;
|
||
align-items: center;
|
||
text-overflow: ellipsis;
|
||
|
||
&.fistInClass {
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.loopItemBaseShow {
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
position: absolute;
|
||
white-space: nowrap;
|
||
align-items: center;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
</style>
|