Vue项目自定义轮播图基础组件
因为不会封装所以学习一下,记录一下
1.先创建一个slider.vue组件,这个是写好的文件
@import '~common/stylus/variable';
.slider {
min-height: 1px;
.slider-group {
position: relative;
overflow: hidden;
white-space: nowrap;
.slider-item {
float: left;
box-sizing: border-box;
overflow: hidden;
text-align: center;
a {
display: block;
width: 100%;
overflow: hidden;
text-decoration: none;
}img {
display: block;
width: 100%;
}
}
}.dots {
position: absolute;
right: 0;
left: 0;
bottom: 12px;
text-align: center;
font-size: 0;
.dot {
display: inline-block;
margin: 0 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: $color-text-l;
&.active {
width: 20px;
border-radius: 5px;
background: $color-text-ll;
}
}
}
}
2.接下来是分析的过程
轮播图的大概原理
文章图片
在其他组件中的使用(recommend.vue)
文章图片
export default {
data(){
return {
recommends:[]//获取来的数据
}
}
}
如何写一个自定义功能的代码呢?先分析常规的轮播图的需求:1、自动轮播,2、循环轮播,3、播放时长 这里是用的better-scroll插件进行的轮播控制
js部分代码
//首先得知道,在什么时候初始化scroll,首先得知道better-scroll初始化时机为组件渲染完毕,在mounted这个钩子函数里面进行
import {addClass} from 'common/js/dom.js''
import BScroll from 'better-scroll'
mounted(){
//保证DOM成功渲染加个延时,浏览器通常13ms刷新一次
setTimeout(() =>{
this._setSliderWidth()
this._initSlider()
},20)
},
methods:{
//横向滚动初始化scroll之前,需要设置slider得宽度,
/*先给两个节点添加引用 ref
div class="slider" ref="slider">*/
_setSliderWidth(){
//先获得sliderGroup.childrensliderGroup是DOM元素
this.children = this.$refs.sliderGroup.children
//设置sliderGroup的宽度
let width = 0
//先去获取sliderGorup父亲的宽度
let sliderWidth = this.$refs.slider.clintWidth
//每个sliderGroup的子元素的宽度都是一致的所以去for循环去遍历他
for(let i=0;
i
【Vue项目自定义轮播图基础组件】在common/js/DOM.js中编写代码
export function hasClass(el,className){
/*new RegExp(pattern, attributes);
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。*/
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
/*test() 方法用于检测一个字符串是否匹配某个模式.
如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。*/
return reg.test(el.className)
}export function addClass(el,className){
if(hasClass(el,className)){
return
}
let newClass = el.className.split(' ')
newClass.push(className)
//先把它拆成一个数组,再把它添加进去,在用join连起来
el.className = newClas.join()
}
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的()
- 前端|面试官(谈谈Vue和React的区别())