vue实现轮播图片

 更新时间:2022年07月14日 17:02:10   作者:吾行远方  
这篇文章主要为大家详细介绍了vue实现简单的轮播图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

本文实例为大家分享了vue实现轮播图片的具体代码,供大家参考,具体内容如下

1、效果图

2、案例

<template>
?? ? ? <section class="body">
?? ? ? ? ? <section class="wrap">
?? ? ? ? ? ? ? <swiper :options="swiperOption" class="swiper-wrap" ?ref="mySwiper" v-if="banner.length!=0">
?? ? ? ? ? ? ? ? ? <swiper-slide v-for="(item,index) in banner" :key="index" >
?? ? ? ? ? ? ? ? ? ? ? //点击图片跳到哪里,这里跳到home页面 item举例:{img:http://www.***.com/home/images/index_img02.png,url:/home}
?? ? ? ? ? ? ? ? ? ? ? <img :src="http://9i0i.com/pic.php?p=item.img" alt="" @click="skip_out_page(item.url)" />
?? ? ? ? ? ? ? ? ? </swiper-slide>
?? ? ? ? ? ? ? ? ? <!-- 常见的小圆点 -->
?? ? ? ? ? ? ? ? ? <div class="swiper-pagination" ?v-for="(item,index) in banner" :key="index" slot="pagination" ></div>
?? ? ? ? ? ? ? </swiper>
?? ? ? ? ? </section>
?? ? ? </section>
</template>
<script>
?? ?export default {
?? ? ? ?data() {
?? ? ? ? ? ?const that = this;
?? ? ? ? ? ?return {
?? ? ? ? ? ? ? ?imgIndex: 1,
?? ? ? ? ? ? ? ?swiperOption: {
?? ? ? ? ? ? ? ? ? ?//是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
?? ? ? ? ? ? ? ? ? ?notNextTick: true,
?? ? ? ? ? ? ? ? ? ?//循环,而不是每次都突然回到第一个
?? ? ? ? ? ? ? ? ? ?loop: true,
?? ? ? ? ? ? ? ? ? ?//设定初始化时slide的索引,加载页面时显示的第几个,从0开始
?? ? ? ? ? ? ? ? ? ?initialSlide: 0,
?? ? ? ? ? ? ? ? ? ?//自动播放
?? ? ? ? ? ? ? ? ? ?autoplay: {
?? ? ? ? ? ? ? ? ? ? ? ?/*切换轮播图片的时间,即上次切换成功后到再次需要切换的时间*/
?? ? ? ? ? ? ? ? ? ? ? ?delay: 1500,
?? ? ? ? ? ? ? ? ? ? ? ?stopOnLastSlide: false,
?? ? ? ? ? ? ? ? ? ? ? ?/* 触摸滑动后是否继续轮播 false触摸后不再点击继续轮播,true触摸后不再点击不轮播,停在最后一次页面*/
?? ? ? ? ? ? ? ? ? ? ? ?disableOnInteraction: false
?? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ?//滑动速度,时间单位,越小越快,与上面 delay 区别,speed是完成切换所需时间,delay是切换成功后停留多长时间再切换
?? ? ? ? ? ? ? ? ? ?speed: 800,
?? ? ? ? ? ? ? ? ? ?//滑动方向
?? ? ? ? ? ? ? ? ? ?direction: "horizontal",
?? ? ? ? ? ? ? ? ? ?//小手掌抓取滑动
?? ? ? ? ? ? ? ? ? ?grabCursor: true,
?? ? ? ? ? ? ? ? ? ?on: {
?? ? ? ? ? ? ? ? ? ? ? ?//滑动之后回调函数
?? ? ? ? ? ? ? ? ? ? ? ?slideChangeTransitionStart: function() {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?/* realIndex为滚动到当前的slide索引值 */
?? ? ? ? ? ? ? ? ? ? ? ? ? ?that.imgIndex= this.realIndex - 1;
?? ? ? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ?//分页器设置
?? ? ? ? ? ? ? ? ? ?pagination: {
?? ? ? ? ? ? ? ? ? ? ? ?el: ".swiper-pagination",
?? ? ? ? ? ? ? ? ? ? ? ?clickable: true,
?? ? ? ? ? ? ? ? ? ? ? ?type: "bullets"
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ?banner: []
?? ? ? ? ? ?}
?? ? ? ?},
?? ? ? ?methods: {
?? ? ? ? ? ?skip_out_page(v) {
?? ? ? ? ? ? ? ?window.location.href = v
?? ? ? ? ? ?},
?? ? ? ? ? ?get_data() {
?? ? ? ? ? ? ? ?this.$http.get('test').then(res => {
?? ? ? ? ? ? ? ? ? ?if(res.data.code == '0000'){
?? ? ? ? ? ? ? ? ? ? ? ?this.banner = res.data.img_info
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?});
?? ? ? ? ? ?}
?? ? ? ?},
?? ? ? ?mounted() {
?? ? ? ? ? ?this.get_data()
?? ? ? ?}
?? ?}
</script>
<style lang="scss">
?? ?.swiper-wrap{
?? ? ? ?width: 100%;
?? ? ? ?height: 210px;
?? ? ? ?background-color: #fff;
?? ?}
?? ?.swiper-pagination{
?? ? ? ?background: #fff;
?? ?}
?? ?.swiper-pagination-bullet{
?? ? ? ?background: #ccc;
?? ? ? ?width: 10px;
?? ? ? ?height: 10px;
?? ? ? ?opacity: 1;
?? ?}
?? ?.swiper-pagination-bullet-active{
?? ? ? ?background: #00C293;
?? ?}
</style>

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

相关文章

  • Vue 如何使用props、emit实现自定义双向绑定的实现

    Vue 如何使用props、emit实现自定义双向绑定的实现

    这篇文章主要介绍了Vue 如何使用props、emit实现自定义双向绑定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue实现Google第三方登录的示例代码

    Vue实现Google第三方登录的示例代码

    本文记录作者在vue项目中使用到Google第三方登录,查询到的资料文档也不详细,故此把自己所遇到的坑及问题详细的记录下来。
    2021-07-07
  • 在vue项目中promise解决回调地狱和并发请求的问题

    在vue项目中promise解决回调地狱和并发请求的问题

    这篇文章主要介绍了在vue项目中promise解决回调地狱和并发请求的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Element-UI中关于table表格的那些骚操作(小结)

    Element-UI中关于table表格的那些骚操作(小结)

    这篇文章主要介绍了Element-UI中关于table表格的那些骚操作(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue 判断元素内容是否超过宽度的方式

    vue 判断元素内容是否超过宽度的方式

    这篇文章主要介绍了vue 判断元素内容是否超过宽度的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vscode配置vue下的es6规范自动格式化详解

    vscode配置vue下的es6规范自动格式化详解

    这篇文章主要介绍了vscode配置vue下的es6规范自动格式化详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 浅谈Vue 自动化部署打包上线

    浅谈Vue 自动化部署打包上线

    这篇文章主要介绍了浅谈Vue 自动化部署打包上线,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • el-select绑定值遇到的问题小结

    el-select绑定值遇到的问题小结

    碰到一个问题,选择框的数据是后端传过来的,下拉框的数据也是后端传过来的,但是打开下拉框时,发现数据没有高亮,最后通过只要选择框v-model给的值和option的value绑定的值一致,就可以高亮,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue组件系列开发之模态框

    Vue组件系列开发之模态框

    这篇文章主要介绍了Vue组件系列开发之模态框,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue实现大文件分片上传与断点续传到七牛云

    vue实现大文件分片上传与断点续传到七牛云

    这篇文章介绍了vue实现大文件分片上传与断点续传到七牛云的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06

最新评论

?


http://www.vxiaotou.com