码迷,mamicode.com
首页 > 其他好文 > 详细

使用swiper完成轮播图

时间:2021-01-13 11:31:56      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:数字   col   ora   底部   load   import   --   post   轮播   

swiper:https://www.swiper.com.cn/usage/index.html

安装swiper

cnpm i -S swiper

技术图片

在功能组件中定义Swiper组件并设置好插槽

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- 插槽 -->
      <slot></slot>
   </div>
   <!-- 导航按钮 这个自己想要就写不想要可以不写-->
    <div class="swiper-button-prev" @click="prev"></div>
    <div class="swiper-button-next" @click="next"></div>
  </div>
</template>
<script>
// 使用此组件中,添加内容一定要有 swiper-slide
import Swiper from ‘swiper‘
import ‘swiper/swiper-bundel.min.css‘

export default {
  data() {
    return {
      mySwiper: null
    }
  },
  mounted() {
    //   dom操作
    // $nextTick 当虚拟dom渲染完毕,生成了真实的dom方法
    this.$nextTick(() => {
      // 在数据没有请求得到时。实例化了,此时米有得到外层div的绝对宽,滚动没有办法
      this.mySwiper = new Swiper(
        ‘.swiper-container‘,
        //   设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字(可为小数,小数不可loop),或者 ‘auto‘则自动根据slides的宽度来设        定数量。
        // loop模式下如果设置为‘auto‘还需要设置另外一个参数loopedSlides。
        // slidesPerView: ‘auto‘目前还不支持多行模式(当slidesPerColumn > 1)
        // loop: true,
        { slidesPerView: 4 }
      )
    })
  },
  methods: {
    prev() {
      this.mySwiper.slidePrev()
    },
    next() {
      this.mySwiper.slideNext()
    }
  },
  beforeDestroy() {
    //   关掉动画
    this.mySwiper = null
  }
}
</script>

<style>
.swiper-container {
  width: 100%;
}
</style>
 

在显示组件是调用swiper组件完成横向滚动

<template>
  <div class="detail">
    <div class="img">
      <img v-lazy="film.poster" />
    </div>
    <SwiperSide :key="‘actors_‘ + film.actors.length">
      <div v-for="item in film.actors" class="swiper-slide">
        <div>
          <img :src="item.avatarAddredd" />
          <h6>名字</h6>
        </div>
      </div>
    </SwiperSide>
  </div>
</template>

<script>
// 这就是上面的Swiper组件
import SwiperSide from ../../components/Swiper
import { detailData } from ../../api/api
export default {
  components: { SwiperSide },
  data() {
    return {
      id: 0,
      film: { actors: [] }
    }
  },
  created() {
    //   发布一个让底部菜单隐藏的指令 这个是我写的底部菜单你点击进来肯定要隐藏掉底部菜单行 所以这个大家不用管
    this.$bus.$emit(footernav, false)
  },
  async mounted() {
    this.id = this.$router.params.id
   //detailData是封装的请求 下面给你看下怎么封装的  const ret
= await detailData(this.id) this.flim = ret.data.data.film }, beforeDestory() { // 发布一个让底部菜单显示的指令 this.$bus.$emit(footernav, true) } } </script>

封装detailData请求

// 引入封装头信息和请求域名的axios对象 我这里就不写了你可以网上找下自己封装一下
import http from ‘./http‘
// 这个就是你请求的接口地址
import  {flimListUrl} form ‘./config/uri‘

export const detailData = (page = 1) => {
    return http.get(flimListUrl + page)
}

 

使用swiper完成轮播图

标签:数字   col   ora   底部   load   import   --   post   轮播   

原文地址:https://www.cnblogs.com/ht955/p/14267421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!