微信小程序 获奖信息滚动实现

如果你很急 那就直接复制这个

记得添加自己的class 修改替换data

<swiper vertical="true" autoplay="true" current="0" interval="3000" duration="500" :circular="true" :display-multiple-items="data.length>2?3:data.length" >
	<swiper-item v-for="(item,index) in data" :key="index">
		<view>
		<!--你的获奖信息-->
		</view>
	</swiper-item>
</swiper>

曲折过程

1. 第一坑 第三方依赖微信小程序不支持
   本来作为一个newbing重度依赖开发者，能ai就绝对不动手 可是newbing似乎不知道微信小程序的那么多规则 于是推荐我使用了vue-seamless-scrool来进行开发 但是注意这玩意是不支持微信小程序的
   看到报错就该停手了 问题是我头铁 以为是依赖没装好更新版本啥的都试了 直到看到这个
   
   我tm一天全在踩这个坑 查一下才发现是不支持

2. 第二坑 swiper对于动态数据不是很友好
   那既然是微信小程序 那就直接找微信小程序网上搜索 直接拿到了对口的样例代码 https://www.jb51.net/article/150116.htm
   你以为直接跑就行了？
   [渲染层错误] [Component] <swiper>: display-multiple-items 不能大于 swiper-item 数量
   这个其实挺谔谔的 我没想到还会有这种问题 非常的恼火 解决方案也有现成的
   https://blog.csdn.net/Missbelover/article/details/124099645
   直接黏进去 换掉几个数据就行

3. 第三坑 vue3语法规范
   虽然但是 这个代码有点老了 运行的时候报错
   Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.For example, instead of <div id="{{ val }}">, use <div :id="val">.
   这个的意思其实挺简单的 就是别用双括弧了 直接把三目写进去就好了
   好了 整完下班