使用vue.js怎么写出轮播图?
使用vue.js怎么写出轮播图
关注者
30被浏览
73,3608 个回答
说到轮播,那你一定知道鼎鼎大名的swiper,其实用vue来封装swiper是很轻松的事情,我实现了一个。具体教程前往:react转vue--vue2封装swiper轮播组件(2) - react架构经验分享 - SegmentFault
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="str in listImg" :style="{ backgroundImage: 'url(' + str.url + ')' }"></div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
props: ['listImg'],
mounted() {
console.log('mounted', this)
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
speed: 600,
autoplay: 4000,
onTouchEnd: function() {
swiper.startAutoplay()
}
});
}
}
</script>
<style lang="less">
.swiper-container {
width: 100%;
height: 10rem;
.swiper-wrapper {
width: 100%;
height: 100%;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.swiper-pagination-bullet {
width:0.833rem;
height: 0.833rem;
display: inline-block;
background: #7c5e53;
}
}
</style>
【vue】Banner轮播图实例
步骤-准备模板-熟悉elementPlus相关组件→获取接口数据→渲染组件
banner-轮播图
index.css
HTML结构
<!-- banner -->
<div class="banner">
<div class="wrapper">
<!-- 图片 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
</div>
</div>
CSS样式
/* banner */
.banner {
height: 500px;
background-color: #F5F5F5;
}
.banner .wrapper {
position: relative;
height: 500px;
background-color: pink;
overflow: hidden;
}
/* 图片 */
.banner .pic {
display: flex;
/* flex 布局,父级宽度不够,子级被挤小,不想挤小,增大父级尺寸 */
width: 3720px;
}
02-banner-侧导航
HTML结构
<!-- 侧导航 ul -->
<div class="subnav">
<ul>
<li>
<div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
CSS样式
/* 侧导航 */
.subnav {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background-color: rgba(0,0,0,0.42);
}
.subnav li {
display: flex;
justify-content: space-between;
padding-left: 30px;
padding-right: 12px;
height: 50px;
/* background-color: pink; */
line-height: 50px;
color: #fff;
cursor: pointer;
}
/* a所有都是小字,分类是大字 */
.subnav li a {
margin-right: 5px;
font-size: 14px;
color: #fff;
}
.subnav li .classify {
margin-right: 14px;
font-size: 16px;
}
.subnav li .iconfont {
font-size: 14px;
}
.subnav li:hover {
background-color: #00BE9A;
}
03-banner-圆点指示器
HTML结构
<!-- 圆点指示器 -->
<ol>
<li class="current"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
CSS样式
/* 圆点指示器 */
.banner ol {
position: absolute;
bottom: 17px;
right: 16px;
display: flex;
}
.banner ol li {
margin-left: 8px;
width: 22px;
height: 22px;
/* background-color: pink; */
border-radius: 50%;
cursor: pointer;
}
.banner ol i {
display: block;
margin: 4px;
width: 14px;
height: 14px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
}
/* 选中:li半透明; i白色 */
.banner ol .current {
background-color: rgba(255,255,255,0.5);
}
.banner ol .current i {
background-color: #fff;
}
轮播图只是项目的一部分,对电商感兴趣的,可以练Vue3小兔鲜电商项目实战
配套笔记:
- 2023前端最新项目Vue3小兔鲜:第1篇 认识Vue3
- 2023前端最新项目Vue3小兔鲜:第2篇 创建空Vue项目并安装Pinia
- 2023前端最新项目Vue3小兔鲜:第3篇 创建项目并整理目录
- 2023前端最新项目Vue3小兔鲜:第4篇 Layout页
- 2023前端最新项目Vue3小兔鲜:第5篇 Home页
- 2023前端最新项目Vue3小兔鲜:第6篇 一级分类页
- 2023前端最新项目Vue3小兔鲜:第7篇 二级分类页
- 2023前端最新项目Vue3小兔鲜:第8篇 商品详情
- 2023前端最新项目Vue3小兔鲜:第9篇 登录页
- 2023前端最新项目Vue3小兔鲜:第10篇 购物车
- 2023前端最新项目Vue3小兔鲜:第11篇 订单页
- 2023前端最新项目Vue3小兔鲜:第12篇 支付页
- 2023前端最新项目Vue3小兔鲜:会员中心
- 2023前端最新项目Vue3小兔鲜:拓展部分
系统前端自学教程
- 新手入门:HTML5+CSS3+实战项目 → 移动web
- JavaScript阶段: JavaScript基础 → JavaScript核心Web APIs → 数据交互 & 异步编程Ajax\Git
- VUE开发:框架前置课Nodejs&es6 → Vue2+Vue3全套
- React + 微信小程序:React → TypeScript → 微信小程序
★★ 自学前端“三千”问时间到了 ★★
- 前端会有未来吗?
- 前端找工作真的很难吗?
- 从事前端真的没有后端工资高?
- 前端学习到什么程度可以找个月薪9000的工作?
- javascript初学者可以做些什么小东西或者项目来练手?
- 有没有前端大佬分享一下好点前端学习视频?自学看文档感觉进步很小,知识结构也很零散?
- 请问如何学习webpack?
- 前端工程化是指的是啥?
- JavaScript 语句后应该加分号么?
- 前端方向,毕业设计怎么做?
- 如何入门微信小程序开发,有哪些学习资料?
- 有哪些好用的前端开发工具?
- 前端大牛们都学过哪些东西?
- 零基础怎么学习web前端开发效率最快?
- JavaScript中"ArrayBuffer"对象与"Blob"对象到底有什么区别?
- javascript中,const声明的对象和var声明的对象有何异同?
- JavaScript中arguments[0]()表示的是什么?
- vue要用什么软件编程?
- 如何理解 JavaScript 中作为参数的函数的作用域和 this?
- 在JavaScript函数中,什么时候会使用return?
- JavaScript中,如何理解事件这一概念?
- JavaScript 中 for循环怎么理解?
- 为什么有人说 Vue 不适合构建大型项目?
- javascript中的形参和实参问题?
- 如何循序渐进掌握JavaScript中函数编程技术?
- js中switch的一点疑问和写法?
- vue-router具体原理如何? 对比react的router有哪些优缺点?
- javascript 中基本的数据类型有哪些?
- javascript实现数组随机排序?
- javascript初学者可以做些什么小东西或者项目来练手?