VUE 结合MUI 实现轮播图轮播效果

鼓捣了一上午，终于实现了vue结合mui 实现轮播效果。啥也不说了直接上代码吧。分别是mui实现的轮播效果图，以及mui+vue+ajax实现的轮播效果图。

MUI 实现轮播图轮播效果

mui写的实例，div代码块

<div id="slider" class="mui-slider" >
	<div class="mui-slider-group mui-slider-loop" id="stul">
	    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			 <div class="mui-slider-item mui-slider-item-duplicate">
			         <a href="#">
			        	  <img src="imgs/img_home_banner4.jpg">
			         </a>
			 </div>
			   <!-- 第一张 -->
			   <div class="mui-slider-item">
			         <a href="#">
			        <img src="imgs/img_home_banner1.jpg">
			         </a>
			  </div>
			<!-- 第二张 -->
			   <div class="mui-slider-item">
			     	<a href="#">
			        	 <img src="imgs/img_home_banner2.jpg">
			       </a>
			  </div>
			<!-- 第三张 -->
			 <div class="mui-slider-item">
			      <a href="#">
			         <img src="imgs/img_home_banner3.jpg">
			      </a>
			 </div>
			<!-- 第四张 -->
			<div class="mui-slider-item">
			      <a href="#">
			        <img src="imgs/img_home_banner4.jpg">
			        </a>
			 </div>
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			 <div class="mui-slider-item mui-slider-item-duplicate">
			      <a href="#">
			         <img src="imgs/img_home_banner1.jpg">
			       </a>
			 </div>
	 </div>
 	<div class="mui-slider-indicator" id="sliin">
		<div class="mui-indicator mui-active"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
		 <div class="mui-indicator"></div>
	</div>
</div>
		        	

js代码块

<script type="text/javascript">
		
			mui.init({
				
			});
			
			mui.ready(function(){
				mui(".mui-scroll-wrapper").scroll({
					bounce: true //是否启用回弹
				});
				
			});
			
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
			});
		
		</script>

mui+vue+ajax 实现轮播图 实例

div代码块

<div id="slider" class="mui-slider" >
	<div class="mui-slider-group mui-slider-loop" id="stul">
		  <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
		 <div class="mui-slider-item mui-slider-item-duplicate" v-if="prodetail.productImageSmall !== undefined && prodetail.productImageSmall.length>0">
			 <a href="#">
			      <img :src="prodetail.productImageSmall[3]">
			  </a>
		</div>
	 <!-- v-for循环 -->
		 <div class="mui-slider-item" v-for="(pic,index) in prodetail.productImageSmall">
			 <a href="#">
			       <img :src="pic">
			</a>
	</div>
  <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
 <div class="mui-slider-item mui-slider-item-duplicate" v-if="prodetail.productImageSmall !== undefined && prodetail.productImageSmall.length>0">
	 <a href="#">
		<img :src="prodetail.productImageSmall[0]">
	  </a>
	</div>
</div>
 <div class="mui-slider-indicator" id="sliin">
	  <div class="mui-indicator mui-active"></div>
	  <div class="mui-indicator"></div>
	 <div class="mui-indicator"></div>
	 <div class="mui-indicator"></div>
	 </div>
</div>				

此时，如果js代码 还用上面的

var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
			});

不再起作用，需要进行修改。 解决办法：

把那个轮播的操作写在vue的updated这个钩子函数里面

updated: function() {
     var sliderMuiObj = mui(".mui-slider");//滑动科目 
        sliderMuiObj.slider({
          interval: 2000  //如果你想自动3000ms滑动一下就写上这个。
         });
     },

具体代码实现：

<script type="text/javascript">
		var request = getRequest(); //跳转页面需要的参数
		var  productId = request["productId"];
		
		var vm = new Vue({
			el: '#ve',
			data: {
				prodetail: {}
			},
			updated:function(){
                var sliderMuiObj = mui(".mui-slider");//滑动科目 
                sliderMuiObj.slider({
                    interval: 2000  //如果你想自动3000ms滑动一下就写上这个。
                });
            },
			mounted: function() {
				this.$nextTick(function() {
					this._getInfors();
				});
			},
			methods: {
				_getInfors: function() {
					var _this = this;
					$.ajax({
						type: "get",						
						url: IP + "goods/productDet", // uri  productId:productId 自定义的，修改成你自己的就可以
						data:{
							productId:productId
						},
						success: function(data) {												
							console.log(JSON.stringify(data));	
							if(data.code == 200){
								_this.prodetail = data.result;
								console.log(JSON.stringify(_this.prodetail));	
								console.log(_this.prodetail.productImageSmall.length);
								
							}
						}
					});
				}
			}

		});
			
		mui.init({
			swipeBack:true 
		});
			
		mui.ready(function(){
			mui(".mui-scroll-wrapper").scroll({
				bounce: true //是否启用回弹
			});		
		});
</script>


		

我的ajax请求的数据格式是这样的：

{
	"success": true,
	"message": "success",
	"code": 200,
	"timestamp": 1539747857391,
	"result": {
		"productId": 150642571432838,
		"salePrice": 79,
		"productName": "坚果 3 绒布国旗保护套",
		"subTitle": "质感精良、完美贴合、周到防护",
		"limitNum": 100,
		"productImageBig": "https://resource.smartisan.com/resource/63ea40e5c64db1c6b1d480c48fe01272.jpg",
		"detail": "<img src=\"https://resource.smartisan.com/resource/3aa27e8caf798b5e7e3796388190b43b.jpg\" style=\"width:1220px;height:5797px;\" alt=\"\" />",
		"productImageSmall": ["https://resource.smartisan.com/resource/63ea40e5c64db1c6b1d480c48fe01272.jpg", "https://resource.smartisan.com/resource/4b8d00ab6ba508a977a475988e0fdb53.jpg", "https://resource.smartisan.com/resource/87ea3888491d172b7d7a0e78e4294b4b.jpg", "https://resource.smartisan.com/resource/8d30265188ddd1ba05e34f669c5dcf1c.jpg"]
	}
}

利用vue进行双向数据绑定，即可实现 轮播效果。
源码下载mui+Vue实现轮播效果源码