vue.js轮播图,vue 轮播图 第三方插件
本文主要详细介绍了vue rem的自定义旋转木马的效果，手指触碰左边的幻灯片和右边的幻灯片。本文中的示例代码非常详细，具有一定的参考价值，感兴趣的朋友可以参考一下。
用vue rem实现自定义轮播图，供大家参考。具体情况如下
使用unit rem进行页面布局，在动态计算轮播整体宽度时，将px转换为rem相当麻烦。
效果如下：如果当前图片不是第一张也不是最后一张，那么在当前图片中可以刚好看到上一张和下一张的一部分。
具体代码如下
模板
div class=" construction up "
div class=pub-hd
H2建筑升级包/h2
H3附加服务项目/h3
/div
div id=activityDiv
ul num=0 id=activityUl
li class=activityLi v-for=(v，I)in list data :key= I @ touch start . capture= touch start @ touch end . capture= touch end
img src= static/imgs/package/bitmap . jpg
div class=liText
p class= liTtitle { v . little } }/p
1 .施工开始后，业主、设计师和项目经理将进行现场交底。如有个性化项目变更，将执行正常的客户变更程序(参见客户变更通知单)；/p
第二天。披露后，如果客户要求更改个性化项目，除了个性化项目的费用外，还会增加分摊费用/倍。/p
“利普里斯”
Class= title1 主题包价格：span
span class=title24500
元/span
/p
/div
/李
/ul
div class=pointerDiv
currantIndex===0？活动“:”，指针“]”/span
currantIndex===1？活动“:”，指针“]”/span
当前索引===2？活动“:”，指针“]”/span
/div
/div
/div
/模板
脚本
导出默认值{
data () {
返回{
列表：[{李title:旧房改造 }，{李title:旧房改造2}，{李title:旧房改造3}]，
liWidth: 0，
liNum: 0，
startX: 0，
endX: 0，
葡萄干指数：0，
测试：错误
}
},
已安装(){
this.initUlWidth()
},
方法：{
InitUlWidth () {//初始化ul的宽度
设pit=当前手机屏幕与750屏幕的document.documentelement.clientwidth/750//The比
let width=document . getelementsbyclassname( activityli )[0]。偏移//单个li的宽度
margin=getComputedStyle(document . getelementsbyclassname( activityLi )[0]，null)[ marginRight ]//用px获取单个margin right
let margin num=parse int(marginr . replace( px ，))
this . Li width=old width margin num//单宽maringRight
let count=parse int(document . getelementsbyclassname( activityli )。长度)//李的数量
this.liNum=liCount
Ulpx=旧宽度* Li count(Li count-1)* margin num//最后一个边距不算。
文档。getElementByid( activity yul )。style . width=ulpx/pit px //除以比例，使当前div宽度与2倍设计比例相同，设置ul的长度时不计算最后的边距。
},
touchStart (e) {
//记录初始位置
E.preventDefault() //阻止默认事件、滚动等。
This.startx=e.touches [0]。clientx//记录幻灯片开始的位置。
},
触摸端(e) {
E.preventDefault() //阻止默认事件。
//记录结束位置
this.endX=e.changedTouches[0].clientX
//左滑
if (this.startX - this.endX 30) {
console.log(左滑)
如果(这个。当前索引=this。Linux-1){
//不做操作
}否则{
醋栗指数
文档。getelementbyid(“activity yul”)。风格。左=-这个。当前索引* this。liwidth px
}
}
//右滑
if (this.startX - this.endX -30) {
如果(这个。当前索引===0){
//不做操作
}否则{
这个。目前的索引-
文档。getelementbyid(“activity yul”)。风格。左=-这个。当前索引* this。liwidth px
}
}
this.startX=0
this.endX=0
}
}
}
/脚本
style lang=less 范围
@ import ~ less/base。少’；建筑向上{
宽度：100%;公共高清{
填充：0.8雷姆0.6雷姆0；
文本对齐：居中；
背景色：# ffffff
h2{
字体大小：0.32雷姆；
颜色：# 606771;
}
h3{
边距-顶部：0.26雷姆；
字体大小：0.24红色；
颜色：# b9bec4
}
}
#活动四{
左填充：0.4红色；
背景色：# ffffff
溢出：隐藏；
#活动{
位置：相对；
左：0;
身高：8.06雷姆；
过渡：所有0.35英寸口径的枪都是易进易出的；
背景色：# ffffff。activityLi{
浮动：左；
宽度：6.7雷姆；
身高：8.06雷姆；
:not(:last-child){
右边距：0.3毫米；
}
箱形阴影：0 5px 25px 0 rgba(0，0，0，4);
img{
宽度：100%;
身高：3.6雷姆；
}。liText{
填充：0 0.4雷姆；
文本对齐：左对齐；小标题{
填充：0.48雷姆0.36雷姆0；
字体大小：0.34红色；
颜色：# 000000;
}。liDes{
字体大小：0.2雷姆；
颜色：# b5b5b5
}
}。liPrice
身高：0.28雷姆；
行高：0.28雷姆；
颜色：@ c-main；//颜色换一下就好
垂直对齐：底部；
边距-顶部：0.8雷姆；标题1{
显示：内嵌-块；
字体大小：0.22雷姆；
}。标题2{
显示：内嵌-块；
字体大小：0.35雷姆；
}。标题3{
显示：内嵌-块；
字体大小：0.22雷姆；
}
}
}
}。指针
宽度：100%;
身高：1.54雷姆；
背景色：# ffffff
显示器：flex
对齐-项目：居中；
对齐-内容：居中；指针{
显示：内嵌-块；
宽度：0.16雷姆；
身高：0.16雷姆；
背景色：# cccccc
边框半径：100%;
：第n个孩子(2){
保证金：0 0.4元；
}。活动{
背景色：@ c-main；
}
}
}
}
}
/风格
vue.js组件教程请点击专门的vue.js组件学习教程进行学习。
更多vue学习教程请阅读主题《vue实战教程》。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。