基于Swiper封装的图片滑动框架

手动封装一个图片滑动插件
技术栈
Vue + swiper
引入 vue-awesome-swiper

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

主要是利用swiper的滑动 ，

<template>
  <div class="swiper-pic-box">
    <div class="pic-head">
      <span @click="goBack" class="pic-head-close"></span>
      <span class="pic-head-num">{{this.activeIndex}}/{{imgLength}}</span>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" :style="{height:screenHeight + 'px',width:screenWidth+'px'}" class="swiper_style" @slideChange="swpierChange">
      <!-- slides -->
      <swiper-slide v-for="(item,index) in swiperPicList" :key="index" class="swiper-item-infor">
        <img :src="item.src" mode="widthFix" :style="{width:screenWidth+'px'}" class="swiper-img">
      </swiper-slide>
    </swiper>
    <div class="show-laywer-info">
      <div>姓名：{{lawyerInfo.lawyerName ? lawyerInfo.lawyerName  : ''}}</div>
      <div>律师：{{lawyerInfo.institution ? lawyerInfo.institution : ''}}</div>
      <div>职务：{{lawyerInfo.position ? lawyerInfo.position  : ''}}</div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  props: {
    swiperPicList: Array,
    imgLength: Number,
    curSwiperImgIndex: Number,
    lawyerInfo: Object
  },
  data () {
    return {
      screenHeight: 0,
      screenWidth: 0,
      swiperOption: {
        zoomMax: 3,
        initialSlide: 0
      },
      activeIndex: 1,
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  watch: {
    curSwiperImgIndex () {
      // console.log('watch 触发 ', this.curSwiperImgIndex)
      this.activeIndex = this.curSwiperImgIndex + 1
      console.log('watch activeIndex', this.activeIndex)
      let curSwiperImgIndex = this.curSwiperImgIndex

      // this.$set(this.swiperOption, 'initialSlide', curSwiperImgIndex)

      // this.$nextTick(() => {
      //   this.$set(this.swiperOption, 'initialSlide', curSwiperImgIndex)
      // })

      // this.$set(this.swiperOption, 'initialSlide', curSwiperImgIndex)

      this.swiper.slideTo(curSwiperImgIndex, 0, false)
    }
  },
  // created () {
  //   let curSwiperImgIndex = this.curSwiperImgIndex
  //   this.$set(this.swiperOption, 'initialSlide', curSwiperImgIndex)

  //   // this.swiperOption.initialSlide = curSwiperImgIndex
  // },
  mounted () {
    console.log('===swiperPicList', this.swiperPicList)
    console.log('===userInfo', this.userInfo)
    this.screenHeight = document.documentElement.clientHeight
    this.screenWidth = document.documentElement.clientWidth
  },
  methods: {
    swpierChange () {
      // this.activeIndex = this.swiper.activeIndex + 1
      this.$nextTick(() => {
        this.activeIndex = this.swiper.activeIndex + 1
      })
      // this.activeIndex = this.curSwiperImgIndex
    },
    goBack () {
      console.log('goBack this.activeIndex ', this.activeIndex)
      this.$emit('closeSwiperPreview', true)
    }
  }
}
</script>

<style lang="stylus">
 /deep/ .swiper-container {
    height: 85%;
    width: 100%;
 }
 .swiper-item-infor {
    display: flex;
    align-items: center;
 }
 .swiper-img {
  width: 100%;
  margin-top: -1rem;
 }

.swiper-pic-box
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: #000;
  .pic-head
    color: #fff;
    display: flex;
    justify-content: space-between;
    span
      padding: 10px;
      font-weight:bold;
    .pic-head-close::after
      content:"\d7";
      font-size:25px;
      color:#fff;
    .pic-head-num
      margin-top: 6px;
  .show-laywer-info
    position: absolute;
    // border: 1px solid red;
    z-index: 999;
    width: 100%;
    bottom: 20px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.3);
    height: 150px;
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: #CCC;
</style>

可以左右滑动
相册做成九宫格布局

点击进来
开发完后的样子

可以左右滑动，体验比较流畅，不建议使用vue-preview框架，因为vue-preview里面无法动态的自适应图片原有的宽高比例，套vue-preview框架，官方例子里面的width 和 height 属性都是一次性写死的，比如开始设置成宽高比例1600：900，后面所有图片都是按照这个比例来，存在部分图片压缩的情况，后来在网上查了很多关于Vue h5的图片框架，没找到合适的，最终请教前辈们，然后基于swiper的滑动属性，封装了这个框架。