Huanyuyuehui/components/userNameSwiper/userNameSwiper.vue

110 lines
2.2 KiB
Vue
Raw Normal View History

2024-03-21 17:52:58 +08:00
<template>
<view class="user-swiper">
<view class="box" id="box" :style="{marginLeft: `${distance}px`}">
<view class="user-list" v-for="(item,index) in combinationUserList" :key="index">
<image v-show="init" class="header-img" :src="item.avatar ? item.avatar : '/static/images/f.png'" mode=""></image>
<text v-show="init" class="user-name">***** 拼团成功</text>
</view>
</view>
</view>
</template>
<script>
2024-03-21 18:05:36 +08:00
2024-03-21 17:52:58 +08:00
export default {
data() {
return {
init: true,
distance: 0,
boxWidth: 0,
timer: null // 定时器名称
}
},
props: {
combinationUserList: {
type: Array,
default: () => {
[]
}
}
},
watch: {
combinationUserList() {
setTimeout(e => {
const query = uni.createSelectorQuery().in(this);
query.select('#box').boundingClientRect(data => {
this.width = data.width
this.move()
}).exec();
}, 1000)
}
},
activated() {
this.move()
},
methods: {
move() {
// 设置位移
this.timer = setInterval(() => {
this.$set(this, 'distance', this.distance - this.width / this.combinationUserList.length)
// 如果位移超过宽度,则回到起点
if (this.distance === -this.width) {
this.init = false
this.distance = 0
setTimeout(e => {
this.init = true
}, 800)
}
}, 2500)
}
},
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
deactivated() {
clearInterval(this.timer);
this.timer = null;
}
}
</script>
<style lang="scss" scoped>
.user-swiper {
width: 260rpx;
overflow: hidden;
border-radius: 25rpx;
background: rgba(#000000, 0.3);
height: 50rpx;
display: flex;
align-items: center;
.box {
width: max-content;
display: flex;
align-items: center;
flex-wrap: nowrap;
transition: all .8s;
.user-list {
display: flex;
align-items: center;
justify-content: center;
width: 260rpx;
border-radius: 25rpx;
padding: 8rpx 18rpx;
color: #fff;
font-size: 22rpx;
.header-img {
width: 34rpx;
height: 34rpx;
border-radius: 50%;
border: 1px solid #FFFFFF;
margin-right: 6rpx;
}
}
}
}
</style>