uniapp实现多行 跑马灯样式 + 点击弹出图片

效果图如下：

点击蓝色的滚动图会弹出相关证书和内容如图

这种特殊的效果最好使用组件封装好 使用 以下代码就是我封装好的组件代码可以直接使用

<template>
  <view class="marquee-container">
    <view class="marquee-content" :style="{animationDuration: animationDuration + 's'}">
      <view v-for="(item, index) in list" :key="index" class="marquee-item" @tap="toggle(item.imag,item.name)" v-if="list">{{ item.name }}</view>
    </view>
	<!-- 合作商弹窗 + 二维码-->
	<uni-popup ref="popup">
		<view class="pop">
			<view class="">{{title}}</view>
			<view class="popup-use">
				<image id="img" :src="cooperatorImg" style="width: 46vw; height: 28vw; object-fit: none;" mode=""></image>
			</view>
			
		</view>
	</uni-popup>
  </view>
</template>

<script>
export default {
	props:{
		list:{
			type:Array,
			default:()=>{
				return []
			}
		}
	},
  data() {
    return {
     cooperatorImg:'',
	 title:'合作商',
      animationDuration: 10 // 滚动动画的时长，根据实际情况调整
    }
  },
  mounted() {
    // this.startMarquee()
  },
  methods: {
	  // 弹窗
	   toggle(img,title) {
	  	console.log(111,this.$refs.popup,img,title);
	  	this.$refs['popup'].open();
	  	this.cooperatorImg = img
	  	this.title = title
	  	console.log('name',this.title);
	  	console.log('路径地址',this.cooperatorImg);
	  },
	
  },

}
</script>

<style>
	page{
		/* margin: 0 20vw; */
	}
	.pop {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 5%;
		padding-top: 1vw;
		font-size: 1.8vw;
		box-sizing: border-box;
	}
	.popup-use {
		box-sizing: border-box;
		padding: 1vw;
		width: 50vw;
		/* height: 35vw; */
		display: flex;
		justify-content: center;
		letter-spacing: 2px;
		color: black;
		/* #img{
			width: 46vw;
			height: 28vw;
			object-fit: none;
		} */
	}
.marquee-container {
	/* margin: 0 20vw; */
   width: 80vw;
   height: 20vw;
   position: relative;
  overflow: hidden;
  margin-bottom: 2vh;
  
 
}

.marquee-content {
  position: absolute;
  top: 0;
  left: 0;
  animation: marquee linear infinite;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
   /* margin: 3vw; */
}

.marquee-item {
	text-align: center;
	/* min-width: 23%; */
	width: 20vw;
	/* min-height: 3vw; */
	background-color: #F1F8FF;
	font-size: 1.8vw;
	font-size: 1.8vw;
	font-weight: 500;
	color: #333333;
	line-height: 3vw;
	white-space: normal;
	padding: 1.5vw 2vw;
	margin: 0 0.5vw 0.5vw 1vh;
	/* border-radius: ; */
	  
}

@keyframes marquee {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
</style>

如果你不想封装使用 ，可以直接在data里面添加list列表数据进行单页面使用，但是建议封装因为不封装可能会有一点样式的问题
list数据写在data{returen{}} 里面

	list:[
					{
						id:1,
						name:'新疆铭冠宇翔赛鸽俱乐部',
						imag:'../../static/01.jpg'
					},
					{
						id:2,
						name:'四川鸿远职业赛鸽俱乐部',
						imag:'../../static/02.jpg'
					},
					{
						id:3,
						name:'云南大理领路人赛鸽中心',
						imag:'../../static/03.jpg'
					},
					{
						id:4,
						name:'贵州万顺赛鸽中心',
						imag:'../../static/04.jpg'
					},
					{
						id:5,
						name:'云南宣威银集赛鸽中心（秋棚)',
						imag:'../../static/05.jpg'
					},
					{
						id:6,
						name:'山东金翅国际赛鸽公棚',
						imag:'../../static/06.jpg'
					},
					{
						id:7,
						name:'云南宣威银集赛鸽中心(春棚)',
						imag:'../../static/07.jpg'
					},
					{
						id:8,
						name:'内蒙古天宝赛鸽公棚',
						imag:'../../static/08.jpg'
					},
					
					{
						id:10,
						name:'成都国奥(国际）赛鸽中心',
						imag:'../../static/10.jpg'
					},{
						id:11,
						name:'天南铜都赛鸽中心（小棚)',
						imag:'../../static/11.jpg'
					},{
						id:12,
						name:'天南铜都赛鸽中心（春棚)',
						imag:'../../static/12.jpg'
					},{
						id:13,
						name:'天南铜都赛鸽中心(青年棚)',
						imag:'../../static/13.jpg'
					},{
						id:14,
						name:'中国川东赛鸽公棚',
						imag:'../../static/14.jpg'
					},{
						id:15,
						name:'重庆龙乡信鸽公棚（春棚)',
						imag:'../../static/15.jpg'
					},{
						id:16,
						name:'重庆龙乡信鸽公棚（秋棚)',
						imag:'../../static/16.jpg'
					},{
						id:17,
						name:'云南玉溪玉活赛鸽公棚（秋棚)',
						imag:'../../static/17.jpg'
					},{
						id:18,
						name:'江苏爱翔赛鸽中心',
						imag:'../../static/18.jpg'
					},{
						id:19,
						name:'江苏正恒赛鸽公棚',
						imag:'../../static/19.jpg'
					},{
						id:20,
						name:'江苏宝宏赛鸽公棚（春棚)',
						imag:'../../static/20.jpg'
					},{
						id:21,
						name:'江苏宝宏赛鸽公棚（秋棚)',
						imag:'../../static/21.jpg'
					},{
						id:22,
						name:'江苏酒都赛鸽公棚',
						imag:'../../static/22.jpg'
					},{
						id:23,
						name:'甲子园国际信鸽俱乐部',
						imag:'../../static/23.jpg'
					},{
						id:24,
						name:'湖南永翔国际赛鸽公棚',
						imag:'../../static/24.jpg'
					},{
						id:25,
						name:'上海蓝色海湾赛鸽俱乐部',
						imag:'../../static/25.jpg'
					},{
						id:26,
						name:'贵州红枫赛鸽中心(大棚)',
						imag:'../../static/26.jpg'
					},{
						id:27,
						name:'贵州红枫赛鸽中心（小棚)',
						imag:'../../static/27.jpg'
					},{
						id:28,
						name:'郑州华远公棚',
						imag:'../../static/28.jpg'
					}
				]

**注意：**这些数据都是我自己写的模拟数据 具体使用记得换成你们需要数据就ok了