48.vue-awesome-swipe使用
2024-09-01 18:42:22
1.安装：npm install vue-awesome-swiper --save
2.局部引入：
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
components: {
swiper,
swiperSlide
},
3.使用：
<!-- 轮播图 -->
<div class="swiper">
<swiper :options="swiperOption" class="swiper-container">
<!-- slides -->
<swiper-slide class="swiper-item" v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>
<!-- 显示小点-->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- 轮播图 -->
data() {
return {
swiperOption: {
pagination: {
el: ".swiper-pagination",
clickable: true //点击小圆点
},
notNextTick: true,
loop: true, //循环
speed: 1000,
autoplay: true
// grabCursor: true //小手掌抓取滑动
},
//三张轮播，使用变量循环
swiperList: [
{
id: "001",
bg: "white",
imgUrl:"https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/1550974453867424.jpg"
},
{
id: "002",
bg: "red",
imgUrl:
"https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/597831022050017280.jpg"
}
]
};
}
最新文章
- Javascript之一切皆为对象1
- 修改Hosts后对火狐不起作用解决办法
- Android 动画机制与使用技巧
- OC - 8.Quartz2D核心要点
- swift2.0 UIImagePickerController 拍照 相册 录像
- 制作iis自动安装包
- UILabel的讲解
- eclipse导入包之后中文乱码
- os和sys模块的区别及其常用方法总结
- Nginx接收的host值会影响alias的规则匹配
- Docker之数据卷Volume（七）
- sitecore系统教程之架构概述
- Leetcode 1004. 最大连续1的个数 III
- Linux常用基本命令( rmdir, rm, mv )
- ListView单条刷新的方法
- 从Java的堆栈到Equals和==的比較
- maven 统一管理依赖的版本号
- 转载: crypto:start() 错误。
- STL中 map 和 multimap
- 移动端适配插件（flexible.js）