|
|
@@ -7,8 +7,8 @@
|
|
|
ref="demo1"
|
|
|
|
|
|
>
|
|
|
- <div v-for="(item,index) in dataItem" :key="index" class="nut-swiper-slide">
|
|
|
- <span>page{{item.name}}</span>
|
|
|
+ <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide ">
|
|
|
+ <img :src="item.imgSrc" style="max-width:100%;"/>
|
|
|
</div>
|
|
|
|
|
|
</nut-swiper>
|
|
|
@@ -22,8 +22,8 @@
|
|
|
:paginationVisible="true"
|
|
|
|
|
|
>
|
|
|
- <div v-for="(item,index) in dataItem" :key="index" class="nut-swiper-slide">
|
|
|
- <span>page{{item.name}}</span>
|
|
|
+ <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide ">
|
|
|
+ <img :src="item.imgSrc" style="max-width:100%;" />
|
|
|
</div>
|
|
|
|
|
|
</nut-swiper>
|
|
|
@@ -38,17 +38,8 @@
|
|
|
:paginationVisible="true"
|
|
|
|
|
|
>
|
|
|
- <div class="nut-swiper-slide gray" >
|
|
|
- <span>page 1</span>
|
|
|
- </div>
|
|
|
- <div class="nut-swiper-slide gray_1" >
|
|
|
- <span>page 2</span>
|
|
|
- </div>
|
|
|
- <div class="nut-swiper-slide gray" >
|
|
|
- <span>page 3</span>
|
|
|
- </div>
|
|
|
- <div class="nut-swiper-slide gray_1" >
|
|
|
- <span>page 4</span>
|
|
|
+ <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide ">
|
|
|
+ <img :src="item.imgSrc" style="max-width:100%;" />
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -57,33 +48,23 @@
|
|
|
<h4>纵向自动播放</h4>
|
|
|
<nut-swiper
|
|
|
direction="vertical"
|
|
|
- ref="dem4"
|
|
|
+ ref="demo4"
|
|
|
:autoPlay="3000"
|
|
|
- id="dome4"
|
|
|
>
|
|
|
- <div class="nut-swiper-slide gray" >
|
|
|
- <span>page 1</span>
|
|
|
- </div>
|
|
|
- <div class="nut-swiper-slide gray_1" >
|
|
|
- <span>page 2</span>
|
|
|
- </div>
|
|
|
- <div class="nut-swiper-slide gray" >
|
|
|
- <span>page 3</span>
|
|
|
- </div>
|
|
|
- <div class="nut-swiper-slide gray_1" >
|
|
|
- <span>page 4</span>
|
|
|
+ <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide ">
|
|
|
+ <img :src="item.imgSrc" style="max-width:100%;" />
|
|
|
</div>
|
|
|
</nut-swiper>
|
|
|
|
|
|
<h4>滑动懒加载图片</h4>
|
|
|
<nut-swiper
|
|
|
direction="horizontal"
|
|
|
- ref="demo4"
|
|
|
+ ref="demo5"
|
|
|
:lazyLoad="true"
|
|
|
:paginationVisible="true"
|
|
|
>
|
|
|
<div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide ">
|
|
|
- <img :data-src="item.imgSrc" style="max-width:100%; max-height:100%" class="nut-img-lazyload"/>
|
|
|
+ <img :data-src="item.imgSrc" style="max-width:100%;" class="nut-img-lazyload"/>
|
|
|
</div>
|
|
|
|
|
|
</nut-swiper>
|
|
|
@@ -115,21 +96,24 @@
|
|
|
|
|
|
this.dataImgItem = [
|
|
|
{
|
|
|
- imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg'
|
|
|
+ imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
|
|
|
},
|
|
|
{
|
|
|
- imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg'
|
|
|
+ imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
|
|
|
},
|
|
|
{
|
|
|
- imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t22123/348/720079801/233727/23c4c0a4/5b162d64Nc5883413.jpg'
|
|
|
+ imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
|
|
|
},
|
|
|
{
|
|
|
- imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg'
|
|
|
+ imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
|
|
|
}
|
|
|
];
|
|
|
|
|
|
this.$refs.demo1.updateEvent(1);
|
|
|
this.$refs.demo2.updateEvent();
|
|
|
+ this.$refs.demo3.updateEvent();
|
|
|
+ this.$refs.demo5.updateEvent();
|
|
|
+
|
|
|
|
|
|
this.$refs.demo4.updateEvent();
|
|
|
|
|
|
@@ -146,26 +130,17 @@
|
|
|
align-items: center;
|
|
|
display: flex;
|
|
|
}
|
|
|
- .nut-swiper-slide:nth-child(1), .nut-swiper-slide:nth-child(3){
|
|
|
- color:#fff;
|
|
|
- background:#848689;
|
|
|
- }
|
|
|
- .nut-swiper-slide:nth-child(2), .nut-swiper-slide:nth-child(4){
|
|
|
- color:#333;
|
|
|
- background:#ccc;
|
|
|
- }
|
|
|
- .gray{
|
|
|
- color:#fff !important;
|
|
|
- background:#848689 !important;
|
|
|
- }
|
|
|
- .gray_1{
|
|
|
- color:#333 !important;
|
|
|
- background:#ccc !important;
|
|
|
- }
|
|
|
+ // .nut-swiper-slide:nth-child(1), .nut-swiper-slide:nth-child(3){
|
|
|
+ // color:#fff;
|
|
|
+ // background:#848689;
|
|
|
+ // }
|
|
|
+ // .nut-swiper-slide:nth-child(2), .nut-swiper-slide:nth-child(4){
|
|
|
+ // color:#333;
|
|
|
+ // background:#ccc;
|
|
|
+ // }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- #dome4{
|
|
|
- height:100px;
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
</style>
|