swiper相关笔记

vue中使用swiper：

1.终端

npm install vue-awesome-swiper --save-dev

2.使用页面整体代码，局部使用

<template lang="">
    <div class="detail">
        <!-- <el-container>
            <el-row>
                <el-col :span='12' v-for="(item,index) in imgList" :key="index">
                    <img class="images" :src="item.img" />
                    <a href="">{{item.text}}</a><br>
                    <el-link icon="el-icon-star-off" size="mini" :underline="false">4</el-link>
                    <el-link icon="el-icon-chat-dot-round" size="mini" style="margin-left: 10px;" :underline="false">2
                    </el-link>
                </el-col>
            </el-row>
        </el-container> -->
        <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper" style="position: relative;">
            <swiper-slide v-for="(item,index) in imgList" :key="index" style="text-align: center;margin-top: 1.5rem;">
                <img style="margin:1rem;" class="images" :src="item.img" /><br>
                <a href="" style="font-size: 20px;text-align: center;">{{item.text}}</a><br>
                <el-link icon="el-icon-star-off" :underline="false" style="font-size: 1rem;margin-top:.5rem;">收藏：4
                </el-link>
                <el-link icon="el-icon-chat-dot-round" style="margin-left: 10px;font-size:1rem;margin-top:.5rem;"
                    :underline="false">留言：2
                </el-link>
            </swiper-slide>
            <!-- <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button> -->
            <!-- <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev">
                <el-button size="mini" type="primary" icon="el-icon-arrow-left">上一页</el-button>
            </div>
            <div class="swiper-button-next" slot="button-next">
                <el-button size="mini" type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </div>
        </swiper>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    import "swiper/dist/css/swiper.css";
    export default {
        name: "Buy",
        components: { swiper, swiperSlide },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            },
        },
        data() {
            return {
                imgList: [{ img: require('../assets/8G内存条2个.jpg'), text: "8G内存条2个" },
                { img: require('../assets/电瓶车.jpg'), text: "电瓶车" },
                { img: require('../assets/高数书.jpg'), text: "高数书" },
                { img: require('../assets/键盘.jpg'), text: "键盘" },
                { img: require('../assets/圣罗兰小金条12号色.jpg'), text: "圣罗兰小金条12号色" },
                { img: require('../assets/星巴克圣诞杯子.jpg'), text: "星巴克圣诞杯子" },
                { img: require('../assets/自行车.jpg'), text: "自行车" },
                { img: require('../assets/iphone7P.jpg'), text: "iphone7P" },
                ],
                //swiper
                swiperOption: {
                    loop: false,  // 是否循环轮播
                    autoplay: false,  // 是否可以自动轮播
                    slidesPerView: 4,  // 可视区域内可展示多少个块
                    spaceBetween: 30,  // 块之间间隔距离
                    initialSlide: 0,  // 默认初始显示块
                    freeMode: false,
                    // 显示分页
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    // 设置点击箭头
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                },
            };
        },
        methods: {

        },
    }
</script>

<style>
    .swiper-pagination {}

    .swiper-button-next {
        width: 0px;
        height: 0px;
        top: 31rem;
        left: 40rem;
    }
    .swiper-button-prev {
        width: 0px;
        height: 0px;
        top: 31rem;
        left: 32rem;
    }

    .images {
        height: 20rem;
        width: 16rem;
        text-align: center;
        margin: 0 auto;
    }

    .el-row {
        width: 100%;
        height: 100%;
    }

    .el-col {
        height: 16rem;
        width: 12rem;
        margin: .5%;
    }
</style>

问题：swiper上一页、下一页位置无法调整

解决：箭头默认是绝对定位的，必须给父容器一个定位，最好是相对定位就能够调整箭头位置