uniapp公告列表上下循环滚动

最新推荐文章于 2024-08-15 11:33:01 发布

wam923259736

最新推荐文章于 2024-08-15 11:33:01 发布

阅读量2.6k

点赞数 4

文章标签：公告 Swiper 自动播放列表导航详情页链接

本文链接：https://blog.csdn.net/wam923259736/article/details/124626169

版权

<template>
	<view class="swiper-wrapper">
		<!-- <view class="mask" /> -->
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000"
			:duration="2000" :circular="true" :vertical="true" :display-multiple-items="3" easing-function="linear">
			<swiper-item v-for="item in list">
				<navigator :url="'/pages/test/test?id=' + item.id ">
					<view class="swiper-item">
						{{item.name}}
					</view>
				</navigator>

			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						name: '公告1'
					},
					{
						id: 2,
						name: '公告2'
					},
					{
						id: 3,
						name: '公告3'
					},
					{
						id: 4,
						name: '公告4'
					},
					{
						id: 5,
						name: '公告5'
					},
					{
						id: 6,
						name: '公告6'
					}
				]
			}
		},
		methods: {
			goDetail(id) {
				console.log(id)
			},
		}
	}
</script>

<style lang="scss" scope>
	.swiper-wrapper {
		position: relative;

		.swiper {
			width: 100%;
			height: 300rpx;
		}

		.swiper-item {
			padding: 0 20rpx;
		}

	}
</style>