小技巧

一、关于详情页Tab的隐藏

给详情页最外部div一个样式覆盖

.detail-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  min-height: 100%;
  background: #fff;
}

二、遍历对象下标

• 获取下标

• 通过下标遍历数组

• 获取数组下标到新数组

三、视频播放

//1.安装依赖
yarn add video.js
//2.在utils的config.js中导入
import Video from 'video.js'
Vue.prototype.$video=Video;
//3.视频播放
<video :src="url" class="video" controls preload="auto"></video>

相关属性

 <video id="myVideo"       
     class="video-js vjs-default-skin vjs-big-play-centered" 
     controls    //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
     autoplay   //自动播放属性,muted:静音播放
     preload="auto"    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
     poster="../assets/img/E0531.jpg">     //设置视频封面       <source src="../assets/video/E0531.mp4" type="video/mp4" >    //视频地址
</video>

四、图片横向滚动

<div class="wrapper">
   <div class="container">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
      <img src="src/assets/logo.png" alt="">
    </div>
 </div>

//css样式
<style>
        .wrapper{
            overflow-x: auto;
            overflow-y: hidden;
            border: 1px solid #333;
        }
        img{
            width: 250px;
        }
        /* 去掉滚动条，但是在移动端上划不动 */
        /* .wrapper::-webkit-scrollbar{
            display: none;
        } */
        .container{
            display: grid;
            grid-template-columns:repeat(5,250px) ;   //5:分成5份
            gap:10px;    //间隔
        }
    </style>

列题:

<div class="picWalls">
   <div v-for="datas of data.clips" :key="datas">
       <img :src="datas.small" alt="">
   </div>
</div>
//css样式
.picWalls{
  overflow-x: auto;
  overflow-y: hidden;
  display: grid;
  grid-template-columns: repeat(5, 150px);
  gap: 20px;
}
.picWalls img{
  width: 150px;
  height: 80px;
}

五、文本折叠

核心代码

 <p @click="handleClick" :class="{ expansion : active }">{{movies.summary}}</p>

.expansion {
  white-space: pre-line;
  width: 100%;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

六、v-for产生的列表，如何实现active样式的切换？

通过设置当前 currentIndex 实现：

<template>
    <div class="toggleClassWrap">
     <ul>
        <!--li是否有clicked样式取决于当前的currentIndex等于多少-->
        <li @click="currentIndex = index" v-bind:class="{clicked: index === currentIndex}" v-for="(item, index) in desc" :key="index">
            <a href="javascript:;">{{item.ctrlValue}}</a>
        </li>
    </ul>
    </div>
</template>
<script type="text/javascript">
    export default{
        data () {
            return {
                desc:[
                    {
                        ctrlValue:"test1"
                    },
                    {
                        ctrlValue:"test2"
                    },
                    {
                        ctrlValue:"test3"
                    },
                    {
                        ctrlValue:"test4"
                    }
                ],
                currentIndex:0
            }
        }
    }
</script>
<style type="text/css" lang="less">
.toggleClassWrap{
    .clicked{
        color:red;
    }
}
</style>

七、vue中实现切换页面时为左滑出效果

左滑效果实现，需要使用 <transition></transition> 组件配合 css3 动画效果实现。

<div id="app">
      <!-- 使用transiton来规定页面切换时候的样式-->
      <transition name="slide-left">
        <router-view></router-view>
      </transition> 
</div>
<style lang="less">
  /*左滑动效*/
   .slide-left-enter-active {
     animation: slideLeft 0.3s;
   }
  /*自定义动画*/
  @keyframes slideLeft {
    from {
      transform: translate3d(100%, 0, 0);/*横坐标,纵坐标,z坐标*/
      visibility: visible;
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
</style>

八、实现无痕刷新

无痕刷新:在不刷新浏览器的情况下,实现页面的刷新
一般常用的两种刷新方法：

• window.location.reload()，原生 js 提供的方法；
• this.$router.go(0)，vue 路由里面的一种方法；

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。

vue开启无痕刷新

原理：先在全局组件注册一个方法，用该方法控制router-view的显示与否，然后在子组件调用全局方法。
//第一步：在app.vue里面设置
    <template>
        <div id="app">
             <!--通过切换isRouterAlive的值来控制页面的显示与否-->
             <router-view v-if="isRouterAlive"></router-view>
        </div>
    </template>
    <script>
    export  default {
        //给子组件暴露一个方法：这里将当前组件中的reload方法暴露给子组件
        provide(){
            return{
                reload:this.reload
            }
        },
        data(){
            return {
                isRouterAlive:true
            }
        },
        methods:{
            //reload方法中先把isRouterAlive该为false，让router-view不显示
            //然后在$nextTick方法里面重新把isRouterAlive该为true，让router-view重新显示
            //$nextTick表示下一次dom更新完毕之后，在更新dom的时候我们让router-view隐藏，更新dom完
                  毕我们让router-view显示，此时就做到了无痕刷新
            reload(){
                this.isRouterAlive = false;
                this.$nextTick(function(){
                    this.isRouterAlive = true;
                })
            }
        }
    }
    </script>
//第二步：在.vue组件中使用全局方法(先用inject注册全局方法，然后即可通过this调用)
    <script>
    export  default{
        inject:['reload'],
        mounted(){
            this.reload();
        }
    }
    </script>