问题:
由于webpack项目中需要使用到swiper轮播图插件
直接let swiper = require(‘swiper’)使用是不行的
解决方案:
采用ES6的方式来引入
例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据
APP 中接收数据代码:
// 引入轮播图插件; Pagination, Autoplay分别是分页器组件和自动播放组件;
// 可以根据自己的需求引入对应组件
import Swiper, { Pagination, Autoplay } from "swiper"; //引入Swiper类和对应组件
import 'swiper/swiper-bundle.css' //引入Swiper的css样式
Swiper.use([Pagination, Autoplay]) //配置上方引入的组件
接下来只需要在页面放入对应的html结构, 实例化插件就行了
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide1"></div>
<div class="swiper-slide swiper-slide2"></div>
<div class="swiper-slide swiper-slide3"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
// 轮播图
var mySwiper = new Swiper('.swiper', {
autoplay: {
delay: 3000,
stopOnLastSlide: false,
//设定false, 点击分页器后不禁止自动轮播
disableOnInteraction: false,
},
loop: true,
// 分页器
pagination: {
el: '.swiper-pagination',
clickable: true //点击切换指定页
},
})