这篇文章主要为大家详细介绍了vue+rem自定义轮播图效果，手指触摸左滑和右滑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用vue+rem自定义轮播图的实现，供大家参考，具体内容如下
单位使用rem进行页面布局，在动态计算轮播图整体宽度时，需要把px转换成rem，挺麻烦的。
效果如下：如果当前图片不是第一张和最后一张，刚好可以看到当前图片上一张和下一张的一部分。
具体代码如下
<div class="constructionUp"> <div class="pub-hd"> <h2>施工升级包</h2><h3>额外服务项目</h3></div><div id="activityDiv"> <ul id="activityUl"> <li class="activityLi"> <div class="liText"> <p class="liTtitle">{{v.lititle}}</p><p class="liDes">1、开工后，客户、设计师、项目管家三方进行现场交底，若有个性化项目变更，执行正常的客户变更手续（参照：客户变更告知书）；</p><p class="liDes">2、交底后，若客户原因要求个性化项目变更，除了承担个性化项目的费用外，还要增/次的调拨费用。</p><p class="liPrice"> <span class="title1">主题包价格:￥</span><span class="title2">4500</span><span class="title3">元</span></p></div></li></ul><div class="pointerDiv"> <span></span><span></span><span></span></div></div></div> @import "~less/base.less"; .constructionUp{ width: 100%; .pub-hd{ padding: 0.8rem 0 0.6rem 0; text-align: center; background-color: #ffffff; h2{ font-size: 0.32rem; color: #606771; } h3{ margin-top: 0.26rem; font-size: 0.24rem; color: #b9bec4; } } #activityDiv{ padding-left: 0.4rem; background-color: #ffffff; overflow: hidden; #activityUl{ position: relative; left: 0; height: 8.06rem; transition:all .35s ease-in-out; background-color: #ffffff; .activityLi{ float: left; width: 6.7rem; height: 8.06rem; &:not(:last-child){ margin-right: 0.3rem; } box-shadow: 0 5px 25px 0 rgba(0,0,0,.4); img{ width: 100%; height: 3.6rem; } .liText{ padding: 0 0.4rem; text-align: left; .liTtitle{ padding: 0.48rem 0 0.36rem 0; font-size: 0.34rem; color: #000000; } .liDes{ font-size: 0.2rem; color:#b5b5b5; } } .liPrice{ height: 0.28rem; line-height: 0.28rem; color: @c-main; //颜色换一下就好 vertical-align: bottom; margin-top: 0.8rem; .title1{ display: inline-block; font-size: 0.22rem; } .title2{ display: inline-block; font-size: 0.35rem; } .title3{ display: inline-block; font-size: 0.22rem; } } } } .pointerDiv{ width: 100%; height: 1.54rem; background-color: #ffffff; display: flex; align-items: center; justify-content: center; .pointer{ display: inline-block; width: 0.16rem; height: 0.16rem; background-color: #cccccc; border-radius: 100%; &:nth-child(2){ margin:0 0.4rem; } &.active{ background-color: @c-main; } } } } }
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的本文来源gao($daima.com搞@代@#码(网5学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue+rem自定义轮播图效果的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue+rem自定义轮播图效果
转载请注明原文链接：vue+rem自定义轮播图效果
