intelligent-bookshelf/src/views/bookRackList.vue

<template>
  <div id="bookshelf">
    <div class="bookshelf-header" style="height:120px">
      <router-link to="/">
        <span class="icon iconfont icon-l">&#xe631;</span>
      </router-link>
      <h2>本架图书</h2>
      <div class="rack-direct">
        <span :class="classnameL" @click="handleDirect(-1)">左</span>
        <span :class="classnameR" @click="handleDirect(1)">右</span>
      </div>
    </div>
    <div class="rack-box">
      <div v-for="(item,index) in listData" :key="index" class="rack-item">
        <!-- <ul class="rack-box-list">
          <li v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item" @click="handleDetails(eindex)">
            <div class="box-txt">
              <span class="book-name">{{ eitem.title }}</span>
              <span class="book-writer">{{ eitem.author }}</span>
            </div>
          </li>
        </ul> -->
        <!-- <div class="rack-floor">
          <span class="icon iconfont icon-l" @click="handlePage(-1)">&#xe631;</span>
          <p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
          <span class="icon iconfont icon-r" @click="handlePage(1)">&#xe62f;</span>
        </div> -->
        <div :class="['swiper'+index,'rack-box-list']">
          <div class="swiper-wrapper">
            <div v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eindex)">
              <div class="box-txt">
                <span class="book-name">{{ eitem.title }}  {{ eindex+1 }}</span>
                <span class="book-writer">{{ eitem.author }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="'rack-floor'">
          <span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)">&#xe631;</span>
          <p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共 {{ bookList.length }}本)</span></p>
          <span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)">&#xe62f;</span>
        </div>
      </div>
    </div>
    <BookDetails ref="detailDom" />
  </div>
</template>

<script>
import data1 from './data1.json'
import BookDetails from './module/bookDetails.vue'
import { Swiper } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: 'CurrentRackBook',
  components: {
    BookDetails
  },
  data() {
    return {
      listData: [],
      bookList: [],
      classnameL: 'rack-direct-active',
      classnameR: null
    }
  },
  created() {
    this.listData = data1.listData
    this.bookList = data1.rackBook
  },
  mounted() {
    this.initSwiper()
  },
  methods: {
    initSwiper() {
      this.$nextTick(() => {
        this.bookList.forEach((el, index) => {
          new Swiper('.swiper' + index, {
            slidesPerView: 'auto',
            slidesPerGroup: 15,
            observer: true,
            navigation: {
              nextEl: '.icon-r' + index,
              prevEl: '.icon-l' + index
            }
          })
        })
      })
    },
    handleDetails(index) {
      this.$refs.detailDom.bookData = this.bookList[index]
      this.$refs.detailDom.dialogVisible = true
    },
    // 翻页
    handlePage(page) {
      if (page === 1) {
        // 下一页
      } else {
        // 上一页
      }
    },
    // 控制左右
    handleDirect(n) {
      if (n === -1) { // 左
        this.classnameR = null
        this.classnameL = 'rack-direct-active'
      } else { // 右
        this.classnameL = null
        this.classnameR = 'rack-direct-active'
      }
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
.swiper-container{
  position: relative;
  width: 100%;
}
.swiper-slide{
  width: 65px !important;
}
</style>