zoukankan      html  css  js  c++  java
  • 使用swiper完成轮播图

    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 {
       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)
    }
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Could A New Linux Base For Tablets/Smartphones Succeed In 2017?
    使用libhybris,glibc和bionic共存时的TLS冲突的问题
    6 Open Source Mobile OS Alternatives To Android in 2018
    Using MultiROM
    GPU drivers are written by the GPU IP vendors and they only provide Android drivers
    Jolla Brings Wayland Atop Android GPU Drivers
    How to Use Libhybris and Android GPU Libraries with Mer (Linux) on the Cubieboard
    闲聊Libhybris
    【ARM-Linux开发】wayland和weston的介绍
    Wayland and X.org problem : Why not following the Android Solution ?
  • 原文地址:https://www.cnblogs.com/ht955/p/14267421.html
Copyright © 2011-2022 走看看