Vue writes a picture-carousel component that is referenced in the parent component. Use the MUI. Push Concat. Vue

Here first to stick out the MUI's picture carousel The original code, and then change him to Vue write on it.

<div id= "Slider" class= "Mui-slider" >
<div class= "Mui-slider-group mui-slider-loop" >
<!--an additional node (round robin: The first node is the last one)-->
<div class= "Mui-slider-item mui-slider-item-duplicate" >
<a href= "#" >

<p class= "Mui-slider-title" > Watch the World silently </p>
</a>
</div>

<!--1th Zhang-->

<div class= "Mui-slider-item" >
<a href= "#" >

<p class= "Mui-slider-title" > Happiness is to sleep together </p>
</a>
</div>

<!--2nd Zhang-->

<div class= "Mui-slider-item" >
<a href= "#" >

<p class= "Mui-slider-title" > Want a cabin like this, quietly drink coffee </p>
</a>
</div>

<!--3rd Zhang-->

<div class= "Mui-slider-item" >
<a href= "#" >

<p class= "Mui-slider-title" >color of SIP cbd</p>
</a>
</div>

<!--an additional node (round robin: The last node is the first carousel)-->
<div class= "Mui-slider-item mui-slider-item-duplicate" >
<a href= "#" >

<p class= "Mui-slider-title" > Happiness is to sleep together </p>
</a>
</div>
</div>
<div class= "Mui-slider-indicator mui-text-right" >
<div class= "Mui-indicator mui-active" ></div>
<div class= "Mui-indicator" ></div>
<div class= "Mui-indicator" ></div>
</div>
</div>

The key points to note are:

The first picture is the last one, and the last one is the first picture.

The dots below the number of tips in the carousel are the number of pictures they are carousel minus the last and beginning two you added.

Because the size of the IMG image is not very well controlled, you can consider using a background image to add the picture.

Parent component, where the carousel is used

<swiper v-bind:list= "header" hidetitle= "true" height= "100px" @link = "link"/>

The green content is passed to the subassembly, which is received by props:[in the subassembly, and can then be used directly in the subassembly, equivalent to data.

Here's Swiper.vue.

<template>
<div class= "Mui-slider" id= "Slider" ref= "slider" v-bind:style= "{height:_height+ ' px '}" >
<div class= "Mui-slider-group mui-slider-loop" >
<div class= "Mui-slider-item" v-for= "db,i in SS" v-bind:class= "{' mui-slider-item-duplicate ': i==0| | I==ss.length-1} "@tap =" $emit (' link ', db) >//mui-slider-item-duplicate only the first and last class//$emit () receive the functions in the parent component
<a>
<div class= "img" v-bind:style= "{height:_height+ ' px ', ' background-image ': ' url (' +db.posters+ ') '}" v-if= "I==1" > </div>
<div class= "img" v-bind:style= "{height:_height+ ' px '}" v-lazy:background-image= "Db.posters" v-if= "I!=1" ></ div>//Picture lazy load want to know more about my other blog http://blog.csdn.net/qq_33769914/article/details/71084676
<template v-if= "!hidetitle" >
<!--below the title of the article-->
<p class= "Mui-slider-title" ><b>{{title}}</b>{{db.s_title}}</p>
</template>
</a>
</div>
</div>
<div class= "Mui-slider-indicator" v-bind:class= "{' Hidetitle ': hidetitle}" v-if= "ss.length>3" >//Only more than three pictures, That is, minus the extra one that ends up repeating.
<!--v-bind:class= "{' Titletop ':!hidetitle, ' mui-text-right ':!hidetitle}"-->
<div v-bind:class= "{' mui-active ': i==2, ' Mui-indicator ': true}" v-for= "Db,i in SS" v-if= "I>1" ></div>
<!--//The first and last one is not a bit, so this point starts from 2-->
</div>
</div>
</template>

The style is unknown.

<style scoped>
. Mui-slider {min-height:100px}
/*.title {margin-left:30px; color: #eee; position:absolute; bottom:34px; font-size:14px;display:none}*/
. mui-slider-title {background-color: #0B2E4C; color: #fff; text-align:left; padding-right:25px; font-size:12px; color: #ccc; }
. mui-slider-title B {color: #fff; font-size:14px; padding-right:10px;}
. mui-slider-indicator.hidetitle {bottom:0px}
. mui-slider-indicator {bottom:8px}
. img {background-size:cover;height:100%;}
</style>

Export Default {
Created () {
THIS._HEIGHT=WINDOW.INNERWIDTH*30/64;
},
Mounted () {
This.update (this.list);
if (this.height) this._height=this.height
},
Data () {
return {
Ss:[],
_height:0
}
},
props:["List", "Interval", "title", "Hidetitle", "height"],
watch:{
List (list) {
This.update (list);
}
},
methods:{
Update (list) {
if (list&&list.length>0) {
The last one is at the beginning, and the first one is at the end.
You cannot use Unshift to add at the beginning, because after you add a length value for the array, not a new one
var ss=list.unshift[object.assign ({top:1},list[list.length-1])]; The length of the list is obtained. Reference: http://blog.csdn.net/qq_33769914/article/details/55668942
var ss=[object.assign ({top:1},list[list.length-1])].concat (list);
Ss.push (Object.assign ({top:2},list[0])); became the former SS.
This.ss=ss;
Ss.length>1&&this. $nextTick (() =>{
MUI (this. $refs. Slider). Slider ({interval:this.interval| |  5000}); Because the picture data is added at the end, so be sure to write this sentence to the carousel. this. $refs. Slider refers to the ref= "slider" on the page, which is used by node.js, and you can also use $ ("#slider") directly. Slider ({interval:this.interval| | 5000}); the effect is the same.
})
}
}
}
}
</script>