官网编辑遇到的各类问题记录（一）

此文章记录前段时间官网前端编程时出现的各类大小问题，目的贵在为未来遇到相似问题的时候能够快速寻找解决方法，同时避免未来在犯。

实现效果请查看

点击查看效果

 

1.子元素浮动时父元素高度塌陷

缘由：BFC结构

解决方法：在父元素上添加 overflow:hidden;

 

2.width的百分比参照

子元素的宽度是基于父元素的内容宽度来定夺

 

3.图片的失真问题

当图片宽度为100%时，高度设置为auto、或者100%时或者具体px时，图像是否失真。注意铺满屏幕和不失真之间是矛盾的。要铺满整个屏幕，能够设置宽度为100%，高度为100vh。

 

4.去掉li前面的圆点

li
　　list-style-type none

 

 

5.去除图片下方的空隙

img
    vertical-align bottom

 

 

6.让整个背景图铺满窗口

.parent
    margin 0
    padding 0
.bg
    width 100%
    height 100vh
    background url("") no-repeat
    background-size 100% 100%

 

7.vue中使用swiper

将参数写入到mounted中

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
mounted(){
        new Swiper('.swiper-container',{
          direction: 'horizontal',
          loop: true,//循环轮播
          speed:500,
          autoplay: {
            disableOnInteraction: false,//用户操做后不会中止自动播放
          },
          pagination: {
            el:'.swiper-pagination',
            clickable:true
          },
        })
      },

 

8.插入百度地图

使用vue-baiidu-map插件

 示例：

<template>
<baidu-map class="bee_map" :center="{lng: 113.103757, lat: 23.019486}" :zoom="15" :scroll-wheel-zoom="true" ak="我的ak">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <!--在右上角添加缩放控件-->
        <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map><!--在右下角添加缩略图-->
        <!--在地图上添加可拖动的跳跃点标记-->
        <bm-marker :position="{lng: 113.103757, lat: 23.019486}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
          <!--添加信息窗口-->
          <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">深圳小蜜蜂科技网络有限公司</bm-info-window>
        </bm-marker>
      </baidu-map>

</template>


import BeeFooter from "../BeeFooter/BeeFooter"
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmOverviewMap from 'vue-baidu-map/components/controls/OverviewMap.vue'
    import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
    import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
    import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'

    export default {
      name: "About",
      components: {
        BeeFooter,
        BaiduMap,
        BmOverviewMap,
        BmNavigation,
        BmMarker,
        BmInfoWindow,
      },

    methods: {
        infoWindowClose () {
          this.show = false
        },
        infoWindowOpen () {
          this.show = true
        }
      },

 

 

9.鼠标划过业务模块时，实现相似翻拍效果。

<template>
<div class="s_list">
      <ul>
        <li v-for = "(item,index) in business_list" :key = "index" @mouseleave = "leave()" @mouseenter = "enter(index)">
          <div v-bind:class = "[ (isActive | (index != itemId)) ? s1 : hide]">
            <i :class= "item.icon" v-lazy="item.icon"></i>
            <p>{{item.s1_title}}</p>
          </div>
          <div v-bind:class = "[((isHide == false)&(index == itemId)) ? s2 : hide]">
            <div class="s2_title">{{item.s2_title}}</div>
            <div class="s2_list">{{item.s2_list}}</div>
          </div>
        </li>
      </ul>
    </div>
</template>

data() {
        return {
          nav_src:'../../../static/img/轮播图/2.jpg',
          isActive: true,
          isHide: true,
          itemId : 999,
          s1:'s1',
          s2:'s2',
          hide:'hide',
          items:[
            {
              icon:'iconfont icon-app',
              s1_title:'App应用程序',
              s2_title:'App应用程序',
              s2_list:'基于ios/Android应用开发，掌握智能终端时代。'
            },
            {
              icon:'iconfont icon-wangzhanxinxi',
              s1_title:'高端定制网站',
              s2_title:'高端定制网站',
              s2_list:'企业高端定制网站设计，彰显品牌形象'
            },
            {
              icon:'iconfont icon-weixinxiaochengxu',
              s1_title:'微信小程序开发',
              s2_title:'微信小程序开发',
              s2_list:'基于ios/Android应用开发，掌握智能终端时代。'
            },
            {
              icon:'iconfont icon-94',
              s1_title:'游戏开发',
              s2_title:'游戏开发',
              s2_list:'基于ios/Android应用开发，掌握智能终端时代。'
            }
          ]
        }
      },
      methods: {
        enter: function (index) {
          this.isActive = false
          this.isHide = false
          this.itemId = index
        },
        leave: function () {
          this.isHide = true
          this.isActive = true
        }
      }

 

 

10.当鼠标划过图标时，图标产生360度旋转

@keyframes turnZ
    0%
      transform rotateZ(0deg)
    100%
      transform rotateZ(360deg)

i
  &:hover
  color #007aff
  animation-name turnZ
  animation-duration 1s
  animation-iteration-count 1  

 

11.vue中图片的懒加载

使用vue-lazyload

具体用法看

请点击

 

12.背景颜色设置，css经过奇偶匹配

:nth-child(even/odd)

 

 

13.设置返回顶部

注意没法使用iconfont，得下载图片，定位相对于浏览器，即便用position:fixed

mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 点击图标回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      let that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        //获得滚轮条的距离
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      let that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },

 

 

14.导航下落到必定位置，背景颜色设置为阴影

handleScroll () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    let offsetTop = document.getElementById("header_guide").offsetTop
    if (scrollTop > offsetTop) {
        this.isBack = true
    } else {
    this.isBack = false
    }
}    

mounted () {
    window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
},

 

 

15.样式的适应各类屏幕（移动端和网页版）

a.px转为百分比，em或rem

b.判断屏幕宽度或高度

@media screen and （max-width）

 

 

16当屏幕缩小是，导航中的几个标题因为浮动向左，会出现格式问题，此时应该变成菜单图标，图标中包含导航中的题目。

实例以下：

屏幕宽度变化后：

 

 实现方法：

经过：class和@click和样式实现。