vue+mui 轮播图

最新推荐文章于 2024-03-20 09:31:44 发布

车家大少爷

最新推荐文章于 2024-03-20 09:31:44 发布

阅读量270

点赞数

分类专栏： vue mui 前端文章标签： vue mui

前端同时被 3 个专栏收录

136 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

mui

7 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue+mui 轮播图</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1, viewport-fit=cover"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css"/>
	<style type="text/css">
		[v-cloak]{
			display: none;//VUE初始化加载数据时不渲染页面
		}
		.slider_img{
			height: 240px;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		
		<div class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<div class="mui-slider-item mui-slider-item-duplicate" v-for="(item,index) in photos" v-if="index===photos.length-1">
					<img class="slider_img" :src="item"/>
				</div>
		
				<div class="mui-slider-item" v-for="(item,index) in photos">
					<img class="slider_img" :src="item"/>
				</div>
		
				<div class="mui-slider-item mui-slider-item-duplicate" v-for="(item,index) in photos" v-if="index===0">
					<img class="slider_img" :src="item"/>
				</div>
			</div>
		
			<div class="mui-slider-indicator">
				<div class="mui-indicator" :class="{'mui-active':index===0}" v-for="(item,index) in photos"></div>
			</div>
		
		</div>
			
	</div>
</body>

<script type="text/javascript" src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			photos: []
		},
		created: function() {
			//POST数据初始化
			this.photos = ["http://5b0988e595225.cdn.sohucs.com/images/20180626/04bd6134fd6f4fae8593fb958c0e192d.jpeg", "http://5b0988e595225.cdn.sohucs.com/images/20180626/188d423bde1f4c1ea668dc2398c4e7a8.jpeg", "http://img04.hc360.com/fire/201607/201607200848382459.jpg"];
		},
		updated: function(){
			//初始化slider，获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval: 0,//自动轮播周期，若为0则不自动播放，默认为0；
			});
		},
		methods: {}
	});
</script>

</html>