mpvue小程序轮播图绑定动态点击事件

最新推荐文章于 2022-12-14 20:43:38 发布

漂移的电子

最新推荐文章于 2022-12-14 20:43:38 发布

阅读量923

点赞数 1

分类专栏：微信小程序文章标签：小程序 mpvue 轮播图

本文链接：https://blog.csdn.net/weixin_40030173/article/details/92848117

版权

微信小程序专栏收录该内容

39 篇文章 1 订阅

订阅专栏

文采不佳，话不多说。分享一个mpvue小程序轮播图绑定动态点击跳转页面，这个源码可以直接引用。用微信原生的轮播图也可，不过由于设计稿需要，我才改写了指示点的样式。

<template>
	<div>
		<swiper class="swiper" autoplay="true" interval="1000" duration="1000" circular easing-function="easeInOutCubic"   @change="switchItem('switchItem',$event)"
		 :current="currentTab">
			<block v-for="(item, index) in images" :index="index" :key="index">
				<a :href="item.url">
					<swiper-item>
						<img :src="item.imgurl" class="slide-image" mode="widthFix" />
					</swiper-item>
				</a>				
			</block>
		</swiper>
		<div class="tab">
			<a :class="currentTab=='0'?'nav active': 'nav'" data-current="0" @click="switchTab('switchTab',$event)"></a>
			<a :class="currentTab=='1'?'nav active': 'nav'" data-current="1" @click="switchTab('switchTab',$event)"></a>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: "0",
				images: [{
						imgurl: require("../../../static/images/banner1.png"),
						url:"../counter/main"
					},
					{
						imgurl: require("../../../static/images/banner.png"),
						url:"../logs/main"
					}
				]
			}
		},
		components: {},
		methods: {
			switchTab: function(prompt, res) {
				// console.log(prompt,res);
				let oIndex = res.mp.currentTarget.dataset.current;
				this.currentTab = oIndex;
			},
			switchItem: function(prompt, res) {
				// console.log(prompt,res.mp.detail.current);
				let oIndex = res.mp.detail.current;
				this.currentTab = oIndex;
			}
		},
	}
</script>

<style scoped>
	.swiper{
		padding: 0 30rpx 0 30rpx;
		width: 690rpx;
		height: 280rpx;
	}
	.swiper img{
		width: 690rpx;
		height: 280rpx;
	}
	.tab {
		width: 100%;
		padding-top: 10rpx;
		display: flex;
		justify-content: center;
	}
	.nav {
		width: 80rpx;
		height: 6rpx;
		background: #CCCCCC;
		border-radius: 3rpx;
	}

	.nav.active {
		background: rgba(51, 51, 51, 1);
	}
</style>