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">