菜单

js分页插件使用体验_jquery_脚本之家,swiper的运用代码实例_vue

2020年3月21日 - 新闻中心

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用,以下说下使用该插件的一些步骤:

项目中之前需要分页插件,以前用的都是单纯叫做pagenation.js的插件,但是这次集成的时候,项目组一个孩纸用了这个插件,结合网上的例子琢磨了一把。其实大致流程都是相同的,主要将我在用这个分页插件的一些心得分享出来:

npm install vue-awesome-swiper --save

1、分页插件引入html中需要:

第二部在main.js中引入

bootstrap.css

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use

自己写的分页的样式css【如果不用,也可以直接用bootstrap所带的分页css。】

然后就可以在组件中使用该插件

使用jquery可以引入jquery.js

            import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { //是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true notNextTick: true, pagination: '.swiper-pagination', slidesPerView: 'auto', centeredSlides: true, paginationClickable: true, spaceBetween: 30, onSlideChangeEnd: swiper => { //这个位置放swiper的回调方法 this.page = swiper.realIndex+1; this.index = swiper.realIndex; } } } }, //定义这个sweiper对象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 this.swiper.slideTo; } }    
">" />" />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

2、分页插件使用时:

可以定义一个专门页面转换的方法,引入使用:

managementPage:function  { var obj = $.twbsPagination({ totalPages: pagesize,//总页数 startPage: 1,//起始页 visiblePages: pagesize>5?5:pagesize,//展示页数,超出5页展示5页,未超出时展示总页数 initiateStartPageClick: true, hideOnlyOnePage: true,//只有一页时不展示分页 onPageClick:function  {//点击页面事件,回调函数,只能使用ajax异步加载,暂时未发现能够直接在前端操作data的方法。 $.addClass.removeClass; var start = *5+1; var end = page*5+1; var param = { 'start':start, 'end':end }; ds.manageSystem(manageSystemUrl,param);//异步加载的方法,主要需要将起始页与结束页带回后台 } }); obj.data();//加载分页样式},

3、注意:分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现,则需要引用以下代码:

 //页面重载时置空分页数据 $.empty(); $.removeData; $.unbind;

这段代码放入的地方也有讲究,需要放在即将异步加载的数据之前,先异步加载的数据一步清空分页插件,此时再次加载的分页数据才是新的数据内容。

4、分页插件基本使用以上代码便可全部满足。

以上这篇基于twbsPagination.js分页插件使用心得就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图