Vue + Swiper 使用教程
Swiper 作为一款强大的前端框架,功能全面,比如实现轮播、分页等十分好用,不过新手上来很容易踩 '坑' ,主要原因是采用的 Swiper 版本的原因,一旦解决了这个问题,那么就可以参考官方 API 文档,实现任何自己想要的功能了。
Vue 使用 Swiper 需要安装 Swiper 和 vue-awesome-swiper 两个插件。
安装的时候一定要注意版本号 ! 再次强调,一定要注意版本号 !
其中 Swiper 不要安装 6.0 以上的版本,最好安装版本 5 ,因为其官方 API 文档,是 4 和 5 版本的,6.0 版本的文档还没有出来。
npm install Swiper@5
vue-awesome-swiper 一定要安装 4.1.1 版本,不要安装 3.1.3 版本。
npm install vue-awesome-swiper
如果安装 3.1.3 版本,则配置的轮播等效果完全出不来。
这里列出一个效果图,设置了 autoplay 的效果:
把这个组件的源码分享给大家:
<template> <div id="swiper-wrapper"> <p class="title">商品推荐</p> <swiper ref="mySwiper" :options="swiperOption"> <swiper-slide class="recommend-item" v-for="item of recommends" :key="item.goodsId"> <img v-lazy="item.image" class="recommend-img" /> <div class="name">{{item.goodsName}}</div> <div class="price"> <span class="code">¥</span> <span class="mall-price">{{item.mallPrice}}</span> <span class="min-price">¥{{item.price}}</span> </div> <div class="bottom-btn"> <section class="left" > <van-icon name="shopping-cart" /> </section> <section class="right">查看详情</section> </div> </swiper-slide> </swiper> </div> </template>
其中 recommends 为父组件传递过来的推荐商品的数据,包括商品名称、图片、价格等。
<script>...</script> 中最重要的就是 swiper 的配置参数: swiperOption, 所有的配置参数请参考官方 API 文档。
<script> import { Icon } from 'vant'; import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/css/swiper.css'; export default { components: { [Icon.name]: Icon, Swiper, SwiperSlide, }, props: { recommends: { type: Array, default: () => [] } }, data() { return { swiperOption: { slidesPerView: 3, autoplay: { delay: 1000, stopOnLastSlide: false, disableOnInteraction: false } }, } }, } </script>
SCSS规定样式:
<style lang="scss" scoped> #swiper-wrapper { width: 100%; .title { height: 20px; line-height: 10px; padding-left: 15px; font-size: 15px; color: #FF7F50; border-bottom: 1px #eee solid; margin-bottom: 0px; } & .recommend-item { width: calc((1 / 3) * 100%) !important; overflow: hidden; border-right: 1px #eee solid; text-align: center; padding-bottom: 5px; &:last-child { border: none } img { width: 80%; } .name { padding: 5px 0 0 7.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } .price { padding: 5px 0 0 7.5px; .code { font-size: 14px; } .mall-price { font-size: 15px; } .min-price { padding-left: 6px; font-size: 12px; display: inline-block; text-decoration: line-through; color: #999; } } .bottom-btn { margin-top: 4px; padding: 0 7.5px 0 7.5px; display: flex; .left { width: 30%; padding: 7.5px 2px; background-color: #FECA3A; color: #fff; padding: 2px; border-radius: 5px 0 0 4px; } .right { font-size: 12px; padding: 3px; flex: 1; text-align: center; box-sizing: border-box; background-color: #6A5ACD; color: #fff; border-radius: 0 5px 5px 0; } } } } </style>
如有任何疑问问题,欢迎留言哦。