关于 slider 的无缝滚动

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

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

<template>
<div class="swiper-wrapper-pro">
<!-- 缓加载loading组件 -->
<!-- <div class="loading-container" v-if="!dataImg.length">
      <me-loading></me-loading>
    </div> -->
 
<!-- 幻灯片组件 -->
<me-slider
v-bind:direction="direction"
v-bind:interval="interval"
v-bind:loop="loop"
v-bind:pagination="pagination"
 
>
<swiper-slide v-for="(item, index) in dataImg.slider" v-bind:key="index">
<div class="slider-img-container">
<img v-lazy="item" alt="" class="slider-img">
</div>
</swiper-slide>
</me-slider>
 
</div>
</template>
 
<script>
import MeSlider from 'base/slider';
import MeLoading from 'base/loading';
import {swiperSlide} from 'vue-awesome-swiper';
import {swiperOption} from './config';
 
export default {
name:'productSlider',
 
data () {
return {
sliders: [],
direction: swiperOption.direction,      //幻燈片滑動方向
loop: swiperOption.loop,               //無縫滾動
interval: swiperOption.interval,      //輪播開關(0<開啟)及速度
pagination: swiperOption.pagination, //分頁器
};
},
 
// index.vue 已经将图片赋值了, 所以这里不需要再赋值
props:{
dataImg: {
type: [Array, Object],
default:[],
},
},
 
components: {
'me-slider':MeSlider,
'me-loading':MeLoading,
'swiper-slide':swiperSlide,
},
 
created() {
this.con();
},
 
methods: {
con() {
setTimeout(() => {
// console.log('dataImg', this.dataImg);
},3000);
},
},
 
watch: {
dataImg(val) {
console.log('watch-Val',val);
this.sliders = val;
console.log('sliders', this.sliders.slider)
}
}
 
}
 
</script>
<style lang='scss' scoped>
 
.swiper-wrapper-pro {
height: 283px;
}
 
.slider-img {
width: 100%;
height: 100%;
}
 
.loading-container {
padding-top: 100px;
}
</style>

请问老师：

为什么我已经挂入 loop 了，但最后一张没办法向右滑动，立刻回到第一张？

请老师解惑，谢谢您。

慕小庄 2019-09-05

源自：实战：Vue 完成分类、搜索页 3-3 项目作业

1

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2019-09-05 16:45:45

同学你好，首先，我们来分析为什么传入loop但是无法实现无缝轮播

因为在base/slider组件中，通过监听父组件传入的dataSlider值来判断是给swiper组件设置loop属性，你在product.vue中没有传入dataSlider, 所以无法开启无缝轮播

建议：给组件绑定dataSlider值

这样修改之后，虽然可以实现无缝轮播，但是由于同学给轮播图片添加了懒加载，导致最后一张切换到第一张之间显示空白。

建议：可以不使用懒加载技术，在显示整个banner区域之前添加一个判断，判断是否有数据，如果没有数据，显示loading效果，如果有数据的时候，直接显示轮播图片就可以了。这样就不用在每一张加载的时候都显示loading过程了，

另，需要注意一下， dataImg包括content和slider信息，可以将slider直接赋值给sliders，方便后续的操作哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

慕小庄提问者 #1

完美解答，謝謝老師！

2019-09-05 17:09:06

相似问题

关于无缝的逻辑

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

关于滚动条更新

疑问

老师你好，关于swiper滚动条的问题

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

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
您的移动学习伙伴

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