vue移动端电影排片轮播（仿淘票票、猫眼）

公司小程序要改成移动端html5，网上找了很久都没有合适的，ui一直是vant ui，element中的跑马灯card效果不好，不能滑动。也用过swipe ui组件，不太好操作，最后还是在vant上下功夫了

效果图

html代码

<van-swipe:loop="false":width="swipeWidth":show-indicators="false":initial-swipe="initial"@change="onSwipeChange"
>//前两个swipe是占位符，因为我们是5个img<van-swipe-item></van-swipe-item><van-swipe-item></van-swipe-item>//居中的img<van-swipe-item v-for="(i, index) in banner" :key="index" @click="swipeIndex(index)" class="swipe_div" >//主图，加div原因是为了样式统一<div :style="oImg"  class="swipe_div"><img :src="i.img" alt="剧照" /></div>//设置主图遮罩，用于区分是否选中<div :class="initial==index?'swipe_div_back_choose':'swipe_div_background'" :style="oImg" ></div></van-swipe-item>//后两个swipe是占位符，因为我们是5个img<van-swipe-item></van-swipe-item><van-swipe-item></van-swipe-item>
</van-swipe>

js代码

data(){return{initial: 0,//轮播图定位位置，默认0banner: [],//轮播图片，数据库获取oImg: {},   //动态设置轮播图padding，这个可以不考虑swipeWidth: parseInt((window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth) / 5), //获取浏览器宽度设置自适应，5个img}
},
created() {this.img();
},
methods: {// 动态设置轮播图宽度img() {this.oImg = "padding:0px " + (this.swipeWidth - 64) / 2 + "px;";},// 滑动swipe居中，vant自带的onSwipeChange(e) {Toast("当前 Swipe 索引：" + e);this.initial = e;},// 点击swipe居中，我们手写的swipeIndex(e) {Toast("点击索引：" + e);this.initial = e;},
},

css代码

/* 轮播 */
.schedules_nav .van-swipe {background: #404040;
}
.schedules_nav .van-swipe__track {margin: 8px 0;
}
.schedules_nav .van-swipe-item .swipe_div {width: 64px;height: 90px;
}
.schedules_nav .van-swipe-item .swipe_div_back {width: 64px;height: 90px;position: relative;top: -90px;background: rgba(0, 0, 0, 0.7);
}
.schedules_nav .van-swipe-item .swipe_div_back_choose {width: 64px;height: 90px;position: relative;top: -90px;background:none;
}
.schedules_nav .van-swipe-item img {width: 100%;height: 100%;
}

注：动图就不上了，css没添加动画效果，小伙伴们可以自己做动画效果。不懂得可以下方留言，欢迎交流

vue移动端电影排片轮播（仿淘票票、猫眼）相关推荐

ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告)
ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告) 广告条目可以单独写成布局文件,然后在布局文件或者代码中添加到总布局中从源码可以看出,其实ViewFlipper间接的继承了FrameLa ...
Android 实现图片轮播(仿淘宝首页商品轮播展示)
一引用依赖 // 图片轮播图implementation 'com.github.dongjunkun:BannerLayout:1.0.6' 二创建图片加载工具类 public class G ...
Vue以CDN方式调用Swiper轮播异常
Vue以CDN方式调用Swiper轮播异常参考文章: (1)Vue以CDN方式调用Swiper轮播异常 (2)https://www.cnblogs.com/Tylerrrkd/p/9165886. ...
轮播移动端 html,移动端h5如何使用轮播插件swipe
移动端h5如何使用轮播插件swipe 发布时间:2020-07-16 15:36:34 来源:亿速云阅读:100 作者:Leah 本篇文章为大家展示了移动端h5如何使用轮播插件swipe,代码简明扼 ...
html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
Vue实现数据大屏组件轮播效果
Vue实现数据大屏组件轮播效果需求分析实现备注需求采用Vue结合Echarts制作了数据大屏,由于每个组件占用的空间较小,展示起来不够清晰,所以需要在展示大屏之后,每隔一段时间,就对各组 ...
更好的设计 | 苹果cms10《 SKRN》自适应影视站绿色清新精品模板高端大气宽屏轮播
苹果cms10< SKRN>自适应影视站绿色清新精品模板高端大气宽屏轮播可以拿来做影视站的经典侧栏样式模板.自定义幻灯,包含了专题.剧情.明星.留言页面等样式及全部功能此款为私人10k ...
苹果CMSv10自适应视频站精品模板高端大气宽屏轮播幻灯模板
苹果CMSv10自适应视频站精品模板高端大气宽屏轮播幻灯模板此款为私人3k高价定制版经协商同意后上架为共享版本,上架不久后销量爆棚,宽屏大气模板,DIY系列支持扩展,完美自适应支持手机触屏! 声明: ...

vue移动端电影排片轮播（仿淘票票、猫眼）

vue移动端电影排片轮播（仿淘票票、猫眼）相关推荐

最新文章

热门文章