中文官网:Swiper中文网

英文:英文网

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

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

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

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

          var swiper = new Swiper('.process', {
touchRatio:1/parseInt(dd),  //计算滑动距离比例,每次可以滑动多少距离,dd 是a标签的个数(做滑动标签的个数) 这样每次只能滑动一下了
slidesPerView: , //同时可以显示多少个
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) + ;
GetList(); //获取数据的方法
}
});

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

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

    //索引为1的时候
if (parseInt(index) === (parseInt(iValue)+)) {
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"></i>XXXX</p>
<p><i class="icon"></i>XXX</p>
<p><i class="icon"></i>XXX</p>
</span>
</li>--%>
</ul>
<span class="icon switch swiper-button-prev"></span>
<span class="icon switch swiper-button-next"></span>
</Section>
  var mySwiper = new Swiper('.pictures', {
//autoplay: 3000, //是否自动滑动
initialSlide: index,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next'
});

Swiper插件的更多相关文章

  1. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  2. swiper插件的简单使用,实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...

  3. swiper插件遇上tab切换

    当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...

  4. ionic3 使用swiper插件 实现轮播效果

    由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题  首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下  自动播放 不断 ...

  5. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  6. 【react开发】使用swiper插件,loop:true时产生的问题解决方案

    这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...

  7. swiper插件几个容易忽略的地方

    以下内容为swiper4版本的 1.在我们用swiper插件做轮播的当我们左右滑动后会出现自动轮播停止了 此时我们需要在autoplay中 加上这个属性 autoplay:{ delay:1000, ...

  8. vue中引入swiper插件

    这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...

  9. 实战:vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  10. swiper插件在ie浏览器无反应,解决办法

    在写pc端页面时,用swiper插件发现在ie中用不了,百度下说是swiper从3以后向手机端发展,所以在pc端无响应.后来了解到,swiper3是专门针对移动端写的.如果想兼容IE8的话,应该引入s ...

随机推荐

  1. protobuf在c++的使用方法以及在linux安装

      https://blog.csdn.net/wangyin668/article/details/80046798 https://www.cnblogs.com/zhouyang209117/p ...

  2. equals()方法 与 == 区别

    equals()方法 与 == 区别 : equals():在字符串中比较内容,则必须使用equals(变量),如果相等则为true,否则为false == :使用==比较的是地址是否一致 class ...

  3. 搜索提示(search suggest)文献阅读

    Learning to Personalize Query Auto-Completion 样本 正例用用户的sug点击,其余是负例 特征 用户历史特征: query历史频次,候选和用户历史输入的ng ...

  4. 3DSMAX 安装失败

    AUTO Uninstaller 更新下载地址 1.选择3DSMAX 2.选择3DSMAX的版本 3.点击“开始卸载”,然后重新安装就可以了

  5. Linux的page cache使用情况/命中率查看和操控

    转载自宋宝华:https://blog.csdn.net/21cnbao/article/details/80458173 这里总结几个Linux文件缓存(page cache)使用情况.命中率查看的 ...

  6. Murano Weekly Meeting 2015.08.04

    Meeting time: 2015.August.4th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting summa ...

  7. java内存区域与内存溢出

    JVM的内存区域划分: jvm的内存区域分为5部分:程序计数器,虚拟机栈,本地方法栈,堆跟方法区. 程序计数器,虚拟机栈,本地方法栈三部分是线程私有的,堆跟方法区是公共的. 1.程序计数器 是一块较小 ...

  8. VCL

    vcl常用配置 不缓存摸一个资源 在vcl_recv中 if (req.url ~ "private") { return (pass); } 动静分离 先定一个多个backend ...

  9. php7.0.24-nts配置步骤

    php-cgi.exe文件运行 php-cgi.exe -b 127.0.0.1:9000 -c D:/myphp2017/php7-nts/php.ini nginx命令 启动 start ngin ...

  10. Js中parseFloat()方法所产的精度不一致问题

    <script language="javascript"> function checkForm(){ var Sum="0.11"; var S ...