vue-day11----数据的使用、vue-awesome-swiper的使用、vue-awesome-swiper自动轮播失效问题和循环播放失效问题

### 技术栈

    vuex

    axios

    vue-lazyload

    vue-router

    UI框架----vant

    vue-touch

    better-scroll

    UI组件封装

    JS组件封装

    vue-awesome-swiper

 

    安装插件：npm i axios vant vue-touch@next better-scroll vue-awesome-swiper

 

### 项目环境

    vue-cli@3

 

　引入reset.css，设置root fontsize为50，然后在页面量的尺寸在vscode中自动转换为rem。

 

### vue.config.js

    const path=require("path");
    module.exports={
        configWebpack:{
            resolve:{
                alias:{
                    "@":path.join(__dirname,"./src"),
                    "@api":path.join(__dirname,"./src/api"),
                    "@components":path.join(__dirname,"./src/components"),
                    "@paegs":path.join(__dirname,"./src/paegs"),
                    "@router":path.join(__dirname,"./src/router"),
                    "@store":path.join(__dirname,"./src/store"),
                    "@utils":path.join(__dirname,"./src/utils"),
                    "@assets":path.join(__dirname,"./src/assets")
                }
            }
        },
        devServer:{
            proxy:{
                "/v3":{
                    target:"http://192.168.43.185:3000",
                    changeOrigin:true
                }
            }
        }
    }

 

### 配置路由

    ①在router文件夹中新建home/index.js、classify/index.js、cart/index.js、mine/index.js：

        export default{
            name:"home",
            path:"/home",
            component:()=>import("@pages/home"),
            meta:{
                title:"首页"
            }
        }

    ②在router/index.js中：

        import home from "./home";
        import classify from "./classify";
        import cart from "./cart";
        import mine from "./mine";


        const routes = [
            {
                path:"/",
                redirect:"/home"
            },
            home,
            classify,
            cart,
            mine
        ]

    

    这样做的好处是条理清晰，后面用到二级路由时在格子的js文件里配置。

 

### 数据的使用

    新建api/index.js文件，将接口统一管理

 

    ①tiantian-Api文件夹用cmd打开，npm i装插件，npm run start启动

    ②vue.config.js中配置代理：

        proxy:{
            "/v3":{
                target:"http://192.168.43.185:3000",
                changeOrigin:true
            }
        }

    ③api/index.js中定义接口 /v3/homepage ：

        export default{
            home:{
                homepage:"/v3/homepage"
            }
        }

    ④store/index.js中，actions中请求数据，mutations中修改state中数据，供页面使用：

        import http from "@utils/request.js";
        import api from "@api/index.js";
        export default{
            state:{
                banner:[],
                dataList:[],
                goodsList:[],
                promotionBanner:[],
                recommend:[]
            },
            actions:{
                async getHomepage({commit}){
                    let data=await http({
                        method:"get",
                        url:api.home.homepage
                    });
                    commit("getHomeData",data);
                }
            },
            mutations:{
                getHomeData(state,data){
                    console.log(data)
                    state.banner=data.data.banner;
                    state.dataList=data.data.dataList;
                    state.goodsList=data.data.goodsList;
                    state.promotionBanner=data.data.promotionBanner;
                    state.recommend=data.data.recommend;
                }
            },
            namespaced:true
        }

    ⑤Home/index.vue中，dispat()触发mutations中的方法，辅助函数接收state中的banner：

        import { mapState } from "vuex";
        

        created() {
            this.$store.dispatch("homepage/getHomepage");
        },
        computed: {
            ...mapState({
                banner:state=>state.homepage.banner
            })
        }

        注意：调用子模块（homepage）的属性和方法时需要在前面加 homepage

 

### vue-awesome-swiper的使用

    参考：https://www.npmjs.com/package/vue-awesome-swiper

 

    ①安装：npm install vue-awesome-swiper --save

    ②引入vue-awesome-swiper插件和css文件，注册swiper, swiperSlide组件：

        import Vue from "vue";
        import VueAwesomeSwiper from "vue-awesome-swiper";
        import "swiper/dist/css/swiper.css";
        import { swiper, swiperSlide } from "vue-awesome-swiper";
        Vue.use(VueAwesomeSwiper);


        components: { swiper, swiperSlide }

    ③html代码，遍历banner：

        <swiper ref="mySwiper" class="home_banner" :options="swiperOption">
            <swiper-slide v-for="(item,index) in banner" :key="index">
                <img :src="item.image" />
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- 前进后退按钮 -->
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
            <!-- 滚动条 -->
            <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>

    ④swiperOption配置项（参考swiper5使用方法----https://www.swiper.com.cn/usage/index.html）：

        data() {
            return {
                swiperOption: {
                    // 自动播放
                    autoplay: {
                        // 用户操作swiper之后，是否禁止autoplay，默认为true
                        disableOnInteraction: false,
                        delay:2000,
                    },
                    // 分页器
                    pagination: {
                        el: ".swiper-pagination"
                    },
                    // 前进后退按钮
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    // 滚动条
                    scrollbar: {
                        el: ".swiper-scrollbar"
                    },
                    // 循环
                    loop: true,
                    // 垂直滚动
                    direction: 'vertical'
                }
            };
        }

 

 

### vue-awesome-swiper自动轮播失效问题和循环播放失效问题

    自动轮播失效：

        问题描述：设置 autoplay:true 时，当用户操作轮播图后停止自动轮播。

        解决：

            将 autoplay:true 改为

 　　　　autoplay: {disableOnInteraction: false,delay:2000,}

 

    循环播放失效：

        问题描述：设置 loop: true 后还是不能循环轮播。

        原因：循环还没有完的时候swiper组件运行冲突出错导致的。

        解决：给swiper组件添加 v-if属性 ：

　　　　<swiper ref="mySwiper" class="home_banner" :options="swiperOption" v-if="banner.length">