4回答

好帮手慕码

2020-03-18

同学你好，问题已经找到了吧？！同学可以自己找到问题很棒哦，继续加油，祝学习愉快~

0

Edward666

提问者

2020-03-18

基础组件slider:

<template>
  <!-- swiper组件 -->
  <swiper v-bind:options="swiperOption">
      <!-- slot插槽增加灵活度 -->
      <slot></slot>
      <!-- 图片指示器小点 -->
      <div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import {swiper,swiperSlide} from 'vue-awesome-swiper';//引入开发依赖vue-awesome-swiper
export default {
    name: 'MeSlider',
    //组件注册
    components: {
        swiper,
        swiperSlide
    },
    //组件slider的接收参数
    props: {
        direction: {//决定幻灯片的方向
            type: String,
            default: 'horizontal',
            validator(value) {//验证传递过来的direction参数是否可用.返回true可用
                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
        }
    },
    data() {
        return {
            swiperOption:{
                watchOverflow: true,//只有一个swiper-slide时轮播器swiper失效
                direction: this.direction,//this.direction是通过接收的参数direction
                autoplay: this.interval? {//当接收的参数interval大于0时开启自动轮播
                    delay: this.interval,
                    disableOnInteration:false//有交互时是否停止自动轮播
                } : false,
                slidesPerView: 1,//slider容器同时显示图片的数量
                loop: this.loop,
                pagination: {//是否显示分页器
                    el: this.pagination? '.swiper-pagination' : null
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .swiper-container {
        width: 100%;
        height: 100%;
    }
</style>

页面组件slider：

<template>
    <div class="slider-wrapper">
        <MeSlider :direction="diction" :loop="loop" :interval="interval" :pagination="pagination">
            <swiper-slide v-for="(item,index) in sliders" v-bind:key="index">
                <a :href="item.linkUrl" class="slider-link">
                    <img :src="item.picUrl" class="slider-img">
                </a>
            </swiper-slide>
        </MeSlider>
    </div>
</template>

<script>
import MeSlider from 'base/slider';
import {swiper,swiperSlide} from 'vue-awesome-swiper';
import {sliderOption} from './config';
export default {
    name: 'HomeSlider',
    components: {
        MeSlider,
        swiper,
        'swiper-slide':swiperSlide
    },
    data() {
        return {
            direction: sliderOption.direction,
            loop: sliderOption.loop,
            interval: sliderOption.interval,
            pagination: sliderOption.pagination,
            sliders: [
                {
                'linkUrl':'https://www.imooc.com',
                'picUrl':require('./1.jpg')//本地图片一定要通过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')
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    .slider-wrapper {
        height: 183px;

    }
    .slider-link {
        display: block;
    }
    .slider-link,
    .slider-img {
        width: 100%;
        height: 100%;
    }
</style>

0

好帮手慕码

2020-03-18

同学你好，可以看下是否是属性的单词写错了：

如果确认没有问题的话，可以将相关的代码粘贴到问答区进行问题，以便准确的帮助同学测试。祝学习愉快~

0

hdward666

h 来时我好想找到问题了，是给组件传参哪里的direction写错了。

h020-03-18

共2条回复

Edward666

提问者

2020-03-18

有点急啊，老师可以快一点帮我解答问题吗？

0