zoukankan      html  css  js  c++  java
  • Swiper插件

    中文官网:Swiper中文网

    英文:英文网

    此插件功能比较强大,网页端、手机端都可以使用的插件。这里记录一下在微信h5页面里面滑动获取数据。

    先下载css和js,引用到项目中

    这里有6个节点,没划一个节点去获取此节点里面的数据。

     初始化插件: 也就是说,我每次滑动完毕,都会去执行GetList()方法,获取数据,下面的代码都写都是在$(function(){  这里完成的 })

            
    var swiper = new Swiper('.process', { touchRatio:1/parseInt(dd),  //计算滑动距离比例,每次可以滑动多少距离,dd 是a标签的个数(做滑动标签的个数) 这样每次只能滑动一下了 slidesPerView: 3, //同时可以显示多少个 centeredSlides: true, //滑块居中
    slideToClickSlide:true,//点击slide可以滑动
    paginationClickable: true, //阻止冒泡点击事件 initialSlide: iValue, //初始化的索引,显示在那个位子(图片) 这个值在这个初始化之前就获取了,这里不显示了 onTransitionEnd: function (swiper) { //切换结束时执行 如果索引不为0,初始化的时候会执行此函数 //bug 索引为1没执行此回调函数 // alert(swiper.activeIndex) //切换结束时,告诉我现在是第几个slide index = swiper.activeIndex; //index在前面前面附的值,这里不显示 if (parseInt(index) === parseInt(iValue)) { swiper.lockSwipeToNext(); //禁止向右 } else { swiper.unlockSwipeToNext(); //解禁 } //console.log(index); index = parseInt(index) + 1; GetList(); //获取数据的方法 } });

    这里有个BUG,按理说我索引为1就是显示第二的时候,应该要执行回调方法,然而并没有,所以你可以把回调函数里面需要做的事情在外面在写一遍即可。

    这里只是影响到了我能不能向右滑,所以只用把影响到你的代码在外面写一遍即可

        //索引为1的时候
                if (parseInt(index) === (parseInt(iValue)+1)) {
                    swiper.lockSwipeToNext(); //禁止向右
                } else {              
                    swiper.unlockSwipeToNext(); //解禁
                }

    轮播图:

    <section class="pictures">
        <ul class="swiper-wrapper">
       <%--   数据加载完成后有多条此样的数据   <li class="swiper-slide">
                <img src="http://www.96909.gd.cn/sqfww/UploadFile/ea_2015528102924.jpg">
                <span class="name">
                    <h2>XXX</h2>
                    <p><i class="icon">&#xe651;</i>XXXX</p>
                    <p><i class="icon">&#xe607;</i>XXX</p>
                    <p><i class="icon">&#xe65a;</i>XXX</p>
                </span>
               </li>--%>
        </ul>
        <span class="icon switch swiper-button-prev">&#xe730;</span>
        <span class="icon switch swiper-button-next">&#xe603;</span>
    </Section>
      var mySwiper = new Swiper('.pictures', {
                    //autoplay: 3000,  //是否自动滑动
                    initialSlide: index, 
                    prevButton: '.swiper-button-prev',
                    nextButton: '.swiper-button-next'
                });
  • 相关阅读:
    常见错误集锦
    auto 迭代器的使用
    案例:带有动画的返回顶部
    案例:toDoList
    jQuery事件
    案例:发布微博功能
    案例:购物车功能模块
    jQuery常用的API
    案例:王者荣耀手风琴效果
    案例:jQuery实现tab栏切换功能
  • 原文地址:https://www.cnblogs.com/Sea1ee/p/7365530.html
Copyright © 2011-2022 走看看