图片预览配合轮播 - davy-gan/web GitHub Wiki

<template>
  <div class="photowall">
    <div class="top-part">
      <div class="title">{{name}}</div>
      <div class="change" @click="getImgs">换一换</div>
    </div>
    <div class="bottom-part">
      <div class="swriperList">
        <div class="listwraps">
          <!-- <swiper :options="swiperOption" :class="[lists.length<4?'stop-swiping-wraper':'']">
            <swiper-slide :class="[lists.length<4?'stop-swiping':'']" v-for='(ite) in lists' :key='ite.photoId'>
              <div class="bottom-part-item" v-viewer="options">
                <img :src="ite.url" class="bottom-part-item-img image" :data-source="ite.url" :item="JSON.stringify(ite)">
              </div>
            </swiper-slide>
          </swiper> -->
          <viewer :options="options" :images="lists" @inited="inited" class="viewer" ref="viewer">
            <template slot-scope="scope">
              <swiper :options="swiperOption" :class="[lists.length<4?'stop-swiping-wraper':'']">
                <swiper-slide :class="[lists.length<4?'stop-swiping':'']" v-for='(ite) in scope.images' :key='ite.photoId'>
                  <div class="bottom-part-item" v-viewer="options">
                    <img :src="ite.url" class="bottom-part-item-img image" :data-source="ite.url" :item="JSON.stringify(ite)">
                  </div>
                </swiper-slide>
              </swiper>
            </template>
          </viewer>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { queryPhotoInChannel } from '@/services/photowall.service'
// Vue.use(Viewer)
export default {
  name: 'photowall',
  components: {
    swiper,
    swiperSlide,
    Viewer
  },
  props: {
    // 方案ID
    schemeId: {
      type: String,
      default: ''
    },
    // 子模块列表
    dataList: {
      type: Array
    },
    // 主模块名称
    name: {
      type: String,
      default: ''
    },
    moduleDesc: {
      type: String,
      default: ''
    },
    // 是否设置子模块0——否，1——是
    setSubModule: {
      type: String,
      default: '1'
    },
    // 主模块ID
    moduleId: {
      type: String,
      default: ''
    },
    // 资源类型-混合类型
    sourceTypeCode: {
      type: String,
      default: 'mixinModuleTypeCode'
    },
    // 主模块排序方式
    sortType: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      lists: [],
      currentPage: 1,         // 选中页
      total: 0,              // 总页数
      pageSize: 10,           // 每页多少条数据
      options: {
        toolbar: true,
        navbar:false,
        url: 'data-source'
      },
    }
  },
  mounted () {
    this.getImgs()
  },
  computed: {
    swiperOption () {
      const _this = this
      return {
        slidesPerView: 3,
        spaceBetween: 45,
        autoplay: 3000,
        // // pagination: '.swiper-pagination',
        // // paginationClickable: true,
        autoplayStopOnLast: false,
        // noSwiping: true,
        // noSwipingClass: 'stop-swiping',
        autoplayDisableOnInteraction: false,
        loop: true,
        onClick: function (swiper, e) {
          const item = JSON.parse(e.target.getAttribute('item'))
          console.log(item)
        }
      }
    }
  },
  methods: {
    getImgs () {
      const param = {
        channelId: this.item.projectId,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        isRand: true
      }
      queryPhotoInChannel(param).then(res => {
        console.log(res)
        this.total = res.total || 0
        this.lists = res.wallChannelVoList || []
      })
    },
    inited (viewer) {
      this.$viewer = viewer
    },
  },
}
</script>
<style lang="scss" scoped>
.photowall {
  width: 1200px;
  margin: 0 auto;
}
.top-part {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  font-size: 42px;
  color: #101010;
  letter-spacing: 0;
  text-align: left;
  padding-left: 30px;
}
.change {
  font-size: 16px;
  color: #8f8f8f;
  letter-spacing: 0;
  text-align: left;
  padding-left: 25px;
  background: url(~src/assets/images/channel/change-icon.png) no-repeat;
  background-size: 15px 15px;
  background-position: left center;
  cursor: pointer;
}
.bottom-part-item {
  width: 370px;
  cursor: pointer;
}
.bottom-part-item-img {
  width: 370px;
  height: 244px;
}
</style>