只有一张图片的时候也可以滚动怎么解决？

只有一张图片的时候也可以滚动怎么解决？

是不是因为开了无缝滚动的原因，HTML 结构里面也是生成了三张图片。Swiper 文档上说使用了 loop 模式后，watchOverflow 会无效。

http://img1.sycdn.imooc.com//climg/5e171d5f09801bc706240308.jpg

http://img1.sycdn.imooc.com//climg/5e171d6009ccf19f06700618.jpg
夜雨倾河 2020-01-09
源自：实战：Vue webAPP首页开发   2-3 幻灯片组件--从服务器端获取数据
13
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

5回答
好帮手慕星星 2020-01-11 14:20:59

同学你好，这是插件本身的设置，没有问题。在后面课程中老师有完善这部分：

http://img1.sycdn.imooc.com//climg/5e19693009a7d87617230936.jpg

判断幻灯片长度，如果小于等于1，将loop设置为false，可以继续往下面看哦。

祝学习愉快！

0
收起回答
提问者 夜雨倾河 2020-01-11 11:19:01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// home/slider.vue
 
<template>
<div class="slider-wrapper">
<mine-slider
:direction="direction"
:loop="loop"
:interval="interval"
:pagination="pagination"
v-if="sliders.length"
>
<swiper-slide v-for="(item, index) in sliders" :key="index">
<a :href="item.linkUrl" class="slider-link">
<img :src="item.picUrl" alt="" class="slider-img">
</a>
</swiper-slide>
</mine-slider>
</div>
</template>
<script>
import MineSlider from '@/base/slider';
import {swiperSlide} from 'vue-awesome-swiper';
import {sliderOptions} from './config.js'; // 引入轮播图配置文件
import {getHomeSlider} from '@/api/home.js';
export default {
name: 'home-slider',
data() {
return {
direction: sliderOptions.direction,
loop: sliderOptions.loop,
interval: sliderOptions.interval,
pagination: sliderOptions.pagination,
sliders: [
// {
//     'linkUrl': 'https://www.imooc.com',
//     'picUrl': require('./1.jpg') // 在 js 中，本地图片要通过 require() 来引入
// },
// {
//     'linkUrl': 'https://www.imooc.com',
//     'picUrl': require('./2.jpg')
// },
// {
//     'linkUrl': 'https://www.imooc.com',
//     'picUrl': require('./3.jpg')
// },{
//     'linkUrl': 'https://www.imooc.com',
//     'picUrl': require('./4.jpg')
// }
]
}
},
created() {
this.getSlider();
},
methods: {
getSlider() {
getHomeSlider().then(data => {
this.sliders = data;
});
}
},
components: {
MineSlider,
swiperSlide
}
}
</script>
 
<style lang="scss" scoped>
.slider-wrapper{
height: 183px;
}
.slider-link{
display: block;
}
.slider-link,
.slider-img{
width: 100%;
height: 100%;
}
</style>


0
收起回答
提问者 夜雨倾河 2020-01-11 11:16:17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// base/slider/index.vue
 
<template>
<swiper :options="swiperOption">
<slot></slot>
<div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
</swiper>
</template>
<script>
// 引入第三方轮播图组件插件
import {swiper} from 'vue-awesome-swiper';
 
export default {
name: 'MineSlider',
components: {
swiper,
},
data() {
return {
swiperOption: {
watchOverflow: true, // 当只有一张图片时，轮播图失效
direction: this.direction,
autoplay: this.interval ? {
delay: this.interval,
disableOnInteraction: false // 当产生交互时，是否停止自动轮播 flase 表示不停止
} : false,
slidesPerView: 1, // 设置容器能够同时显示的图片数量
loop: this.loop,  // loop 为 true 时，小圆点显示并且会滚动，反之没有小圆点 不滚动
pagination: {
el: this.pagination ? '.swiper-pagination' : null
},
}
}
},
props: {
direction: {
type: String,
default: 'horizontal',
// 返回 true，表示传入的值是数组中的其中一个，验证通过
validator(value) {
return [
'horizontal', // 水平滑动
'vertical' // 垂直滑动
].indexOf(value) > -1
}
},
// 是否开启自动轮播
interval: {
type: Number,
default: 3000,
validator(value) {
return value > 0;
}
},
// 无缝滚动
loop: {
type: Boolean,
default: true,
},
// 分页器
pagination: {
type: Boolean,
default: true,
}
}
}
</script>
 
<style lang="scss" scoped>
.swiper-container{
width: 100%;
height: 100%;
}
</style>


0
收起回答
提问者 夜雨倾河 2020-01-11 11:12:36
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// home.js
 
import axios from 'axios'; // 引入 axios 用于发送请求，获取数据
import {SUCC_CODE} from './config.js';
 
// 获取轮播图数据 --ajax
export const getHomeSlider = () => {
return axios.get('http://www.imooc.com/api/home/slider',{timeout: 10}).then(res => {
if(res.data.code === SUCC_CODE) {
return res.data.slider;
}
throw new Error('没有成功获取到数据');
}).catch(err => { // 捕获错误
if(err) {
console.log(err);
}
return [
{
linkUrl: 'https://www.imooc.com',
picUrl: require('@/assets/img/404.png')
}
]
})
}


0
收起回答
好帮手慕星星 2020-01-10 10:19:40

同学你好，如果轮播数据没有加载出来，小圆点是不应该显示的：

http://img1.sycdn.imooc.com//climg/5e17de3a097f413403930189.jpg

并且swiper容器中只有这一张报错图片

http://img1.sycdn.imooc.com//climg/5e17de7a09b04d2510290185.jpg

可以下载源码，将自己写代码替换掉源码测试，对比一下，是不是哪里写的有问题：

http://img1.sycdn.imooc.com//climg/5e17deb8096adcf503980236.jpg

如果找不到问题，建议将home.js，base/slider/index.vue，home/slide.vue文件代码粘贴上来，不要截图，便于定位问题所在。

祝学习愉快！

0
收起回答
  • 提问者 夜雨倾河 #1
    如果把不打开无缝滚动，小圆点确实是没有显示，HTML 结构也是只有一张图片。 代码发在上面了，麻烦您帮我看下吧。
    2020-01-11 11:22:06
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于无缝的逻辑
39 0 3
为什么我底下的图片没有设置它也移动了？
10 0 7
问一下老师
14 1 3
PS 中选择图片文字
0 0 3
你好 下面两种方法有什么不同吗？
0 0 3

登录后可查看更多问答，登录/注册

4.Vue与React高级框架开发
  • 参与学习           人
  • 提交作业       239    份
  • 解答问题       10739    个

本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle

了解课程

本课精华内容

问答 作业

老师，这是关于stylus版本和style语法高亮问题解决（可以编辑器自动缩进）如可可行可以置顶，谢谢

115 1

老师,创建VUE环境花了一天时间，创建流程供同学们参考（window）如果方法可行可以置顶，谢谢

152 1

麻烦老师看看这个写法和注释可以吗?如果可以可以置顶一下参考,谢谢

84 1

请检查是否正确

95 1

transition问题-续

65 3

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码