基于vue实现swipe分页组件实例
作者:louisanikita 时间:2024-04-30 10:30:56
项目背景
图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如 Swiper 。
但是当我们项目中的图片轮播只需要一个很简单的轮播样式,比如这样的
我们引用这样一个 110k 的大插件,就大材小用了。再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图
当当当当~~~
我们今天的主角登场了, thebird/Swipe ,这个插件完成了图片轮播需要的基本功能,只有 14.2k ,真真的 轻量级 啊。还有,还有
翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器。此处应该有掌声,哈哈~
简而言之,就是当需要一个简单的轮播时,可以选用 thebird/Swipe ,自己写一个组件。
举个栗子,就是我实现的这个—— 基于 vue 实现swipe分页组件 ,移动端和PC端均适用哦。
Result
Usage
一般情况,轮播图片因为是要经常换的,故在后台定制,定制内容如下
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
没有定制,必须在代码里写的话,也是可以的,造一个data数组swipeInfo
<!--js-->
data:{
swipeInfo:[{
href:"http://www.baidu.com",
imgSrc:""
},{
href:"http://www.baidu.com",
imgSrc:""
},{
href:"http://www.baidu.com",
imgSrc:""
}]
},
components: {
'swipe-module': require('pagination-swipe'),
},
在html中绑定该数据
<!--html-->
<swipe-module :swipeinfo="swipeInfo"></swipe-module>
pagination-swipe组件内容
按照swipe构造html框架,添加了pagination块
<!--template.html-->
<div v-el:swipe class='swipe bar-slider'>
<div class='swipe-wrap'>
<div v-for="item in swipeinfo"><a :href=item.href><img :src=item.imgSrc /></a></div>
</div>
<!-- 分页 -->
<div class="pagination">
<span class="swipe-pagination-switch swipe-active-switch" @click="slideToCur(0)"></span>
<span class="swipe-pagination-switch" @click="slideToCur($index+1)" v-for="item in slideNum"></span>
</div>
</div>
vue构造组件
//index.js
require('./style.less');
var Swipe = require('swipe');
Vue.component('pagination-swipe',{
props: ['swipeinfo'],
template: require('raw!./template.html'),
data: function() {
return {
mySwipe: {},
slideNum: {},
};
},
ready: function() {
var self = this;
//获取子组件中分页小圈圈
var slides = self.$els.swipe.getElementsByClassName('swipe-pagination-switch');
self.mySwipe = new Swipe(self.$els.swipe, {
startSlide: 0,
continuous: true,
speed: 1000,
auto: 4000,
stopPropagation: false,
callback: function(index, elem) {
//渲染分页小圈圈
for (var i = 0; i < slides.length; i++) {
if (i != index) {
slides[i].style.opacity = "0.2";
slides[i].style.background = "#000";
} else {
slides[index].style.opacity = "1";
slides[index].style.background = "#ee3a4a";
}
}
},
});
self.slideNum = self.mySwipe.getNumSlides() - 1;
},
methods: {
//点击底部小圈圈,跳到其所对应页
slideToCur: function(index) {
var self = this;
self.mySwipe.slide(index, 300);
},
}
});
<!--style.less-->
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
height: 200/@rem;
.swipe-wrap {
position: relative;
overflow: hidden;
height: 100%;
div {
float: left;
width: 100%;
position: relative;
margin: 0;
a {
width: 100%;
height: 100%;
background-position: center 0;
background-repeat: no-repeat;
background-color: transparent;
display: block;
img {
width: 100%;
height: 100%;
}
}
}
}
.pagination {
text-align: center;
position: relative;
bottom: 40/@rem;
cursor: pointer;
}
.swipe-pagination-switch {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 100%;
background: #000;
opacity: 0.2;
margin: 0 8px;
z-index: 10;
&:first-child {
background: #ee3a4a;
}
}
.swipe-active-switch {
opacity: 1;
}
}
来源:https://segmentfault.com/a/1190000007299024?utm_source=tuicool&utm_medium=referral
标签:vue,swipe,分页
0
投稿
猜你喜欢
JavaScript程序编码规范[译]
2009-07-20 17:54:00
Python Websocket服务端通信的使用示例
2021-09-16 15:03:19
python通过pillow识别动态验证码的示例代码
2023-08-27 02:29:21
pyqt 实现在Widgets中显示图片和文字的方法
2021-12-25 07:28:16
最大限度优化你的Asp性能
2007-10-01 18:04:00
Python计算标准差之numpy.std和torch.std的区别
2022-08-17 11:38:14
python正则表达式 匹配反斜杠的操作方法
2023-09-04 22:18:52
转换字符串单词的第一个字母为大写
2007-10-18 10:50:00
基于pycharm实现批量修改变量名
2022-01-23 05:46:21
Vue.js绑定HTML class数组语法错误的原因分析
2024-04-30 10:20:07
Python教程之基本运算符的使用(下)
2021-04-29 20:32:37
python中迭代器(iterator)用法实例分析
2023-12-16 05:32:51
IE下,事件触发那点破烂事儿
2009-04-27 12:31:00
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2021-02-01 04:08:12
Python中处理时间的几种方法小结
2021-03-15 17:58:33
Python详细讲解图像处理的而两种库OpenCV和Pillow
2022-08-14 05:23:19
Python keras.metrics源代码分析
2023-10-28 20:58:14
Django基础知识 web框架的本质详解
2023-03-23 17:38:01
如何使用python爬取知乎热榜Top50数据
2021-11-13 05:47:09
上传图片js判断图片尺寸和格式兼容IE
2024-04-10 10:48:37