Vue3.0手写轮播图效果

本文实例为大家分享了Vue3.0手写轮播图效果的具体代码,供大家参考,具体内容如下

让我们开始把

html结构

<template>
  <div class="xtx-carousel" @mouseleave="enterFn" @mouseenter="leaveFn">
    <ul class="carousel-body">
      <li class="carousel-item " :class="{ fade: indexid === index }" v-for="(item, index) in list" :key="item.id">
        <RouterLink to="/">
          <img :src="item.imgUrl" alt="" />
        </RouterLink>
      </li>
    </ul>
    <a href="javascript:;" class="carousel-btn prev" @click="lastPage"><i class="iconfont icon-angle-left"></i></a>
    <a href="javascript:;" class="carousel-btn next" @click="nextPage"><i class="iconfont icon-angle-right"></i></a>
    <div class="carousel-indicator">
      <span @click="indexid = i - 1" v-for="i in list.length" :key="i" :class="{ active: indexid === i - 1 }"></span>
    </div>
  </div>
</template>

js语法

<script>
import { ref, watch, onUnmounted } from 'vue'
export default {
  name: 'Carousel',
  props: {
    // 图片数据
    list: {
      type: Object,
      default: () => {}
    },
    // 轮播图每张切换的事件
    duration: {
      type: Number,
      default: 2
    },
    // 是否开启轮播图
    autoplay: {
      type: Boolean,
      default: true
    },
    // 点击翻几张
    page: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    // 索引
    const indexid = ref(0)
    // 轮播
    const timer = ref(null)
    const TimeFn = () => {
      clearInterval(timer)
      // 每次执行前都清除上一次的定时器
      timer.value = setInterval(() => {
        indexid.value++
        // 如果超出界限就重新回填
        if (indexid.value > props.list.length - 1) {
          indexid.value = 0
        }
      }, props.duration * 1000)
    }
    // 点击+下一站图片
    const nextPage = () => {
      indexid.value += props.page
      if (indexid.value > props.list.length - 1) {
        indexid.value = 0
      }
    }
    // 点击+上一张图片
    const lastPage = () => {
      indexid.value -= props.page
      if (indexid.value < 0) {
        indexid.value = props.list.length - 1
      }
    }
    // 清除定时器
    const leaveFn = () => {
      // console.log('清除定时器')
      clearInterval(timer.value)
      // console.log(timer)
    }
    // 组件消耗,清理定时器
    onUnmounted(() => {
      clearInterval(timer.value)
    })
    // 开启定时器
    const enterFn = () => {
      if (props.list.length > 1 && props.autoplay) {
        // console.log('开启定时器')
        TimeFn()
      }
    }
    watch(
      () => props.list,
      () => {
        if (props.list.length > 1 && props.autoplay) {
          TimeFn()
        }
      }
    )
    return { indexid, leaveFn, enterFn, nextPage, lastPage }
  }
}
</script>

css样式

<style scoped lang="less">
.xtx-carousel {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 150px;
  position: relative;
  .carousel {
    &-body {
      width: 100%;
      height: 100%;
    }
    &-item {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 0.5s linear;
      &.fade {
        opacity: 1;
        z-index: 1;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-indicator {
      position: absolute;
      left: 0;
      bottom: 20px;
      z-index: 2;
      width: 100%;
      text-align: center;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        cursor: pointer;
        ~ span {
          margin-left: 12px;
        }
        &.active {
          background: #fff;
        }
      }
    }
    &-btn {
      width: 44px;
      height: 44px;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 228px;
      z-index: 2;
      text-align: center;
      line-height: 44px;
      opacity: 0;
      transition: all 0.5s;
      &.prev {
        left: 20px;
      }
      &.next {
        right: 20px;
      }
    }
  }
  &:hover {
    .carousel-btn {
      opacity: 1;
    }
  }
}
</style>

注册成全局插件

import Carousel from '../carousel.vue'
// vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展

export default {
  install(app) {
    // 在app上进行扩展,app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
    app.component(Carousel.name, xtxCarousel)
  }
}

在main.js入口文件挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import libraryUI from '@/components/library/index' //自己的插件
createApp(App)
  .use(store)
  .use(router)
  .use(libraryUI) // 挂载插件
  .mount('#app')

如何使用插件呢?

<Carousel :list="list" duration="1" />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue利用better-scroll实现轮播图与页面滚动详解

    前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码

  • vue.js整合mint-ui里的轮播图实例代码

    初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些 安装mint-ui yarn add mint-ui mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了 { "presets"

  • vue使用swiper实现中间大两边小的轮播图效果

    项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swiper的css文件- swiper.min.css 第二部:写入dom结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item,

  • vue轮播图插件vue-concise-slider的使用

    vue-concise-slider vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端 版本 v2.4.7支持vue2.0+ 特点 简单配置 轻量 (~24kB gzipped) 多种滑动样式 目前已实现 全屏自适应 移动端兼容 垂直滚动 定时自动切换 不定宽度滚动 无缝循环滚动 多级滚动 渐变滚动 旋转滚动 page中加入自定义组件 未来将实现 渐变滚动 视差效果 链接 文档 demo 安装 npm install vue

  • Vue 过渡实现轮播图效果

    Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡 下面例子中我们用到列表过渡,可以先学习一下官方的例子 要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图 我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i

  • vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it

  • Vue的轮播图组件实现方法

    今天在上慕课老师fishenal的vue实战课程的时候,有一个轮播图组件实现,在跟着做的时候,自己也踩了一些坑.此外,在原课程案例的基础上,我加入了不同方向的滑动功能. 本文章采用Vue结合Css3来实现轮播图. 首先要了解的是Vue的动画原理.在vue中,如果我们要给元素设置动画效果,则需要使用一个<transition name="targetClassName"></transition>将相应的元素包裹住,如下: <transition name=

  • vue.js实现简单轮播图效果

    学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&

  • 基于vue2.0实现简单轮播图

    因为之前一直在忙公司的项目,vue这块就生疏了不少,正好借这个小demo复习下vue的知识. 先来个效果图: 如图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播: 而下方按钮会根据当前图片自动变红且可以手动控制当前图片. 思路: 整个demo分为轮播图片和控制span两个部分. 按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单, 作为练手就不搞那么复杂了,对项目有追求[强迫症]的童鞋

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

随机推荐