• 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">
  • 相关阅读:
    Java CountDownLatch应用
    servlet 表单
    servlet简单方法
    MySQL WHERE
    JavaScript typeof
    JavaScript字符串
    jsp语法
    HTML链接
    2021.3.10
    2021.3.9
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12392555.html
Copyright © 2020-2023  润新知