swiper滑到最后一页交互

类似淘宝效果，图片展示完，再滑动就是到图文详情（另外一个崭新的页面）。

var client=$(document.body)[0].clientWidth;

var swiper = new Swiper('.swiper-container', {

    pagination: '.swiper-pagination',paginationClickable: true,onTouchEnd: function(swiper){dis=client*($('.swiper-slide').length-1)+70TR=swiper.translateif(TR<-dis){swiper.setWrapperTranslate(TR);alert(“准备切换”);};}
});

思路：1、监听滑动结束之后的事件；2、获取页面宽度；3、算出页面一共走了多少；4、获取wrapper的位移。5、设置手动滑动的距离

html：

<div class="swiper-container"><div class="swiper-wrapper"> <div class="swiper-slide"><img src="" alt="" /><p style=""><p class="shengluo"  style="">查看更多文章查看更多.文章查看更多文章查看文章查看更多文章查看</p></p></div><div class="swiper-slide" style="position:relative;"><img src="" alt="" /><p  style=""><p class="shengluo"  style="">查看更多文章查看更多.文章查看更多文章查看文章查看更多文章查看</p></p></div><div class="swiper-slide" style="position:relative;"><img src="" alt="" /><p style=""><p class="shengluo"  style="">查看更多文章查看更多.文章查看更多文章查看文章查看更多文章查看</p></p></div><span style="padding-left:20px;padding-top:30px;">查看更多文章</span></div>              <div class="swiper-pagination"></div>
</div>

swiper滑到最后一页交互相关推荐

订单支付页交互说明文档
订单支付页交互说明文档 1. 页头 Footnote Name On Click 1
Android例子源码类似58同城的通过滑屏控制引导页
Android例子源码类似58同城的通过滑屏控制引导页运行效果图如下,向右滑动屏幕,小人的小腿在跑呀跑呀! 附源码: csdn下载地址:http://download.csdn.net/detail ...
Php超出高度隐藏,swiper滑屏中某一页超出高度解决方法
swiper做多屏滑动的时候,其中一页超高一屏的高度了.整体上就破坏了滑屏的整体感觉,但项目中有需要就需要修改啊. 需要修改的样式:.swiper-slide { background: #f1f1f ...
css3 分栏滑页翻页,基于CSS3 column多栏布局实现水平滑页翻页交互
一.CSS3 column多栏布局私有前缀: -webkit-.-moz- 常用的属性: column-width:每栏的高度 column-count:最理想的分栏个数 column-gap:栏目 ...
打造丝般顺滑的 H5 翻页库
(点击上方公众号,可快速关注) 来源:zhangbobell fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library/ 如果好文章投 ...
微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）
maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!).. 源码下载:http://download. ...
微信小程序 # 轮播图swiper滑动到最后一页进行页面跳转
需求背景首次启动小程序时要用轮播图做展示,希望能实现滑动到最后一页自动就跳转到首页实现思路 <view class="container" id="first- ...
仿淘宝上拉进入详情页交互的实现
可以看到,该页面是分为两部分的,一部分是一开始就能看到的商品信息,然后我们上拉屏幕,屏幕不断往上滚动,滚动到第一部分结束时可以看到底部有"继续拖动,查看图文详情"一行文本出现.继续 ...
打造丝般顺滑的 H5 翻页库（传送门）
http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library// 转载于:https://www.cnblogs.com/j ...

swiper滑到最后一页交互

swiper滑到最后一页交互相关推荐

最新文章

热门文章