【vue 组件 mint-ui】 看了一下源码,给轮播图Swiper封装自定义跳转的函数
2017-09-21 19:11
2376 查看
mint-ui 自身提供了前一页,后一页的function,这里由于项目需求,点击任意tab都可跳转到相应的图片,所以自己封装了一个function:switchCar。
查看项目请到(https://github.com/Rise-Devin/FullStack-Product-Transport-User)
Usage
import Mint from ‘mint-ui’;import { Swipe, SwipeItem } from ‘mint-ui’;
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
html
switchCat 为点击tab切换轮播图事件(我封装的自定义跳转事件),front为 mint-ui提供的前一页的事件
back为 mint-ui提供的后一页的事件
mt-swipe 、mt-swipe-item为 mint-ui 提供的轮播图组件
<ul > <li @click="switchCar(index)" :class="carIndex==index?'active':''" v-for="(car,index) in carConfig">{{car.name}}</li> <i class="border" ref="nav_border"></i> </ul> <div> <i @click.stop="front()" class="fa fa-angle-left fa-btn banner-left" aria-hidden="true"></i> <i @click.stop="back()" class="fa fa-angle-right fa-btn banner-right" aria-hidden="true"></i> <ul ref="carBox"> <mt-swipe :show-indicators="false" ref="mtSwipe" @change="handleChange" :auto="0"> <mt-swipe-item ref="mtItem" v-for="car in carConfig" :key="car.name"><img :src="car.img_src"/></mt-swipe-item> </mt-swipe> <p class="car_title">{{carConfig[carIndex].name}} 起步价: ¥{{curCarConfig.price}}</p> </ul> </div>
js
front(){ //前一页 this.$refs.mtSwipe.prev(); }, back(){ //后一页 this.$refs.mtSwipe.next(); }, handleChange(index){ //跳转之后获取当前的下标 this.carIndex = index; }, switchCar(index) //自定义跳转,只需要传图片的下标即可 { if(index==this.carIndex) { console.log('break off'); return; } var callback = () => { if (index !== undefined) { var newPage = this.$refs.mtItem[index].$el; removeClass(curPage.$el, 'is-active'); addClass(newPage, 'is-active'); this.$refs.mtSwipe.index = index; } if (this.$refs.mtSwipe.isDone) { this.$refs.mtSwipe.end(); } if (prevPage) { prevPage.$el.style.display = ''; } if (nextPage) { nextPage.$el.style.display = ''; } }; if(index>this.carIndex) { var curPage = this.$refs.mtItem[this.carIndex]; var nextPage = this.$refs.mtItem[index]; var pageWidth= this.$refs.mtItem[0].$el.clientWidth; if (nextPage) { nextPage.$el.style.display = 'block'; this.$refs.mtSwipe.translate(nextPage.$el, pageWidth); } console.log(this.$refs.mtSwipe.isDone); this.$refs.mtSwipe.isDone = true; this.$refs.mtSwipe.before(curPage.$el); this.$refs.mtSwipe.translate(curPage.$el, -pageWidth, 300, callback); if (nextPage) { var self =this; var timer = setTimeout(function(){ self.$refs.mtSwipe.translate(nextPage.$el, 0, 300); clearTimeout(timer); },50) } } else if(index<this.carIndex) { var curPage = this.$refs.mtItem[this.carIndex]; var prevPage = this.$refs.mtItem[index]; var pageWidth= this.$refs.mtItem[0].$el.clientWidth; if (prevPage) { prevPage.$el.style.display = 'block'; this.$refs.mtSwipe.translate(prevPage.$el, -pageWidth); } this.$refs.mtSwipe.isDone = true; this.$refs.mtSwipe.before(curPage.$el); this.$refs.mtSwipe.translate(curPage.$el, pageWidth, 300, callback); if (prevPage) { this.$refs.mtSwipe.translate(prevPage.$el, 0, 300); } } },
本篇文章如对您有用请点击关注哦~,谢谢!
相关文章推荐
- vue用mint-ui的picker组件封装一个省市区三级联动组件
- vue自定义轮播图组件 swiper
- VUE2.0+Element-UI+Echarts封装的组件
- vue2.0使用swiper组件实现轮播效果
- vue2.0使用swiper组件实现轮播
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- 【Android 自定义View】封装好的轮播图组件,可直接使用(附demo)
- wc-swiper:基于 Vue 实现的 移动端图片轮播组件
- vue一个组件引入多个swiper轮播可能引发的分页器数量异常问题
- 从零开始封装自己的自定义Vue组件
- vue中element-ui树形控件自定义节点,注意一下
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- 微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
- vue.js整合mint-ui里的轮播图实例代码
- vue2.0 自定义组件的方法(vue组件的封装)
- Vue封装Swiper实现图片轮播效果
- vue2.0使用swiper组件实现轮播的示例代码
- 基于 Vue.js 的移动端组件库mint-ui