博客

关于动态路由：

1.在进行要跳转的那个组件里面进行这样书写：

<router-link tag="li"
             class="item" v-for="item of recommendList" :key="item.id"
             :to="'/detail/' + item.id" 
             >
    <!--里面包含的组件-->
</router-link>

必须要这样进行书写，因为这样书写的话router-link to=”/detail”如果直接写router-link的话，vue会把li标签当成a标签进行处理，会有相应的样式出来，可以使用 tag = “li” 来代表标签，这样vue就不会当成a标签了。

：to=” ‘/detail/’ + item.id” 会把参数带到参数里面，就是所谓的动态路由了。

2.最后在router.js里面这样写

{
      path: '/detail/:id',   //动态路由
      //前面的路径必须是detail后面必须携带一个参数，并且存放到一个变量叫id的变量里面
      name: 'Detail',
      component: Detail
    },

让一个盒子居中显示：

.list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*上面是垂直居中 只针对浮动的元素*/
        position: fixed;
        top: 88px;
        right: 0;
        bottom: 0;
        width: 20px;
        
    }

关于vueAwesomeSwiper公共画廊组件的使用

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

1.首先先安装好相应的组件

“vue-awesome-swiper”: “^2.6.7”,

2.然后在main.js里面进行引入就好了

//进行全局引入VueAwesomeSwiper 进行拖动的插件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

<template>
    <div  class="container">
        <div class="wrapper" @click="handleClose">
            <!--swiperOption记得要在下面的data里面进行定义 不然没法使用-->
            <swiper :options="swiperOption" > 
                <swiper-slide v-for="item of imgs" :key="item.index">
                    <img class="gallary-img" :src="item" alt="">
                </swiper-slide>
                <!--下面页码处理-->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>
<script>
data() {
        return  {
            swiperOption: {
                //所有的参数同 swiper 官方 api 参数
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                //监听dom改变的话 会自动刷新 重新计算宽度 就不会出现bug了
                observeParents: true,
                observer: true
            }
        }
    },
</script>

关于头部标签渐隐渐现的显示

1.这里要注意的是 一定要把相应的组件设置成 position:flex; 绝对定位 不会随着滚动而滚动了 只和浏览器有关 才会有效果

<div class="words" v-show="!showAbs"
        :style="opacityStyle"
        >
        <!--设置不透明度的-->
            景区详情
</div>
<style>
    .words {
        position:fixed;
        height: 44px;
        background-color: #00bcd4;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        line-height: 44px;
        color: #fff;
        font-size: 16px;
    }
</style>

2.定义一个初始的opacity为0并且把它绑定在元素的动态样式上面 这样这个元素的样式就会跟着变化了

     在data里面
        data() {opacityStyle: {
                opacity:0 //不透明度
            }}

3.在钩子函数里面进行定义 一个全局事件

activated () { //页面被展示的时候就会调用这个函数
    //因为页面内使用keep-alive所以可以使用这个 生命周期函数 页面一挂载就会执行这个生命周期函数
        window.addEventListener('scroll', this.handleScroll)
    },

4.在methods里面进行定义这个方法

handleScroll () {
             //得到滚动的距离
            const top = document.documentElement.scrollTop
            if (top > 60) {
                //设置一个高度 会随着滚动条变化 高度也会不断地变换
                let opacity = top / 140
                //因为opacity的值不能大于1 所以用三目运算符做一个判断
                opacity = opacity > 1 ? 1 : opacity
                //把获取到的值赋值给opacityStyle 键和值都相等的话 直接写一个就好了
                this.opacityStyle = {
                    opacity
                }
                this.showAbs = false
            } else {
                this.showAbs = true
            }
        }

5.5.记得解绑这个全局事件，不然其他组件会受到影响

//对全局事件进行解绑 就不会影响到其他时间的执行了
    deactivated () { //页面被隐藏的时候 就会别解绑定
        window.removeEventListener('scroll',this.handleScroll)
    }