官網編輯遇到的各類問題記錄（一）

時間 2019-12-06

標籤編輯遇到各類問題記錄简体版

原文原文鏈接

此文章記錄前段時間官網前端編程時出現的各類大小問題，目的貴在爲未來遇到相似問題的時候能夠快速尋找解決方法，同時避免未來在犯。css

實現效果請查看前端

點擊查看效果vue

1.子元素浮動時父元素高度塌陷ios

緣由：BFC結構npm

解決方法：在父元素上添加 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)
},