swipe_swiper - CSDN
精华内容
参与话题
  • swipe多种手机触屏滑动效果
  • swipe的基础使用(二十五)

    千次阅读 2016-07-19 09:40:30
    本次文章介绍swiper当中的RTL布局。 RTL布局呢,就是right to left,就是从左到右的布局。 代码方面没有什么复杂的地方,还是按照原来的顺序,首先编写基础的swiper页面框架。 ... H5EDU 3

    本次文章介绍swiper当中的RTL布局。

    RTL布局呢,就是right to left,就是从左到右的布局。


    代码方面没有什么复杂的地方,还是按照原来的顺序,首先编写基础的swiper页面框架。

           <div class="swiper-container" dir="rtl">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 7<img src="logo.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

    当中加入了控制按钮和分页导航组件。

    我们在外部容器的标签当中添加了一个自定义属性 dir=“rtl”,这里就是用来开启rtl布局的代码。


    然后到js当中进行初始化。当然,不要忘记引用swiper样式文件,和给页面设置CSS样式。

     var swiper = new Swiper('.swiper-container',{
                    pagination:'.swiper-pagination',
                    nextButton:'.swiper-button-next',
                    prevButton:'.swiper-button-prev',
                    paginationClickable:true
                });
    这样我们再运行页面的时候,第一页就在最右边的一页,也就是原来的最后一页,但是页面内容不会翻转
    展开全文
  • Swipe Views(滑动视图)

    千次阅读 2015-04-30 12:55:24
    http://developer.android.com/intl/zh-CN/design/patterns/swipe-views.html 拥有高效的导航是建立拥有一个优秀设计的应用的基础之一。虽然应用程序通常都是建立成分层的这种样式,但同样也有一些平行的导航设计...

    拥有高效的导航是建立拥有一个优秀设计的应用的基础之一。虽然应用程序通常都是建立成分层的这种样式,但同样也有一些平行的导航设计可以打败分层的导航设计的例子,并且可以更快的进入具体的每个数据项以及更加的令人满意的。滑动视图允许用户通过简单的滑动手势有效的在数据项之间切换,从而让浏览和操作数据有一个流程的体验。


    A 详情页间的滑动

    一个应用的数据结构总会设计成主/细节模式,用户可以看见有一组相关的数据项组成的列表,例如图片、聊天信息、或者是邮箱,然后选择其中的一项在一个单独的页面中显示他的详细信息。


    主(左) 以及 细节(右) 视图。

    在手机上,因为主和细节页都是单独的页面,这一般都会需要用户在列表和详情页之间来回反复,通常又叫“pogo-sticking”。在用户想要连续查看多个详细页的情况下,通过使用滑动手势切换上一个或者下一个详细页可以避免“pogo-sticking”

    连续的邮件之间的导航使用了滑动手势,如果一个视图的宽度超过了屏幕的宽度,例如一个较宽的电子邮件,确保用户一开始的滑动是在当前这个view内的水平滚动。一旦到达当前view的最后,用一个新的滑动来到下一个view。另外一点,当内容可以自己水平滚动时,要支持通过边缘滑动在不同view间切换的功能。

    在导航到下一个view前,在一个可滚动的view里面使用滑动手势。


    B 标签间滑动

    如果你的应用使用了操作栏标签,使用滑动在不同view间切换。


    联系人应用在顶层页面间使用手势滑动切换

    展开全文
  • 很详细的web简洁的滑动效果Swipe.JS

    千次阅读 2017-07-06 11:03:41
    最近要做一个移动web的项目,前端后端都自己一人来搞。... 虽然很多人都是前台很简单,没啥搞的(至少像我做后台的那些同事这么认为),但是真正开始弄起来,还是有些困难的,要做到美观易用,更得下工夫研究里面的...

    最近要做一个移动web的项目,前端后端都自己一人来搞。由于之前一直是做后端的开发,没涉及过前端的开发,甚是无从下手,但又不得不去弄,于是乎,先把w3school上前端相关的html、js、css都预览了一遍,然后在仿照别人的站点自己尝试着去实现。
    虽然很多人都是前台很简单,没啥搞的(至少像我做后台的那些同事这么认为),但是真正开始弄起来,还是有些困难的,要做到美观易用,更得下工夫研究里面的所以然。

    以下是我要实现一个在手机上滑动(图片,文字等)的效果。我先是把别人的页面下载下来,然后根据它的在页面呈现出来的“模块”进行切割,把各个模块单独提起出来,这样做:(1)理解页面的布局;(开始的时候,在怀疑,前、后台开发的思维模式是否不一样,因为一开始的时候,看页面的那些html、css、js实在晕,而且感觉代码也很凌乱)(2)熟悉html标签和css、js的用法;(这个需要花费一定的时间去熟悉每个标签的特性和用法)。
    这个示例,就是我提取出来后,把原来多余的css等删除,仅仅保留滑动效果最简洁的部分,由于刚接触,在描述和理解上有不妥的地方,还烦请指正 :)

    一、先简要说下swipe.js(参见:http://swipejs.com/
    之所以用到这个js,主要是:
    (1)我在百度里搜索“页面滑动”等关键词时,就出现了它老人家。
    (2)在我下载下来别人滑动页面里面也用到了它。

    二、如何使用
    swipe是一个纯的JavaScript,里面没用到任何的其他的js框架(由于时间问题,里面的东西没很细研究,以后有时间了,再来学习),要实现移动端的滑动,必须要的元素有:
    (1)html,这个当然不必说
    (2)css,需要一定的css做样式。swipe里面会查找关键标签的样式,根据样式来现实
    (3)js,这里面有自己定义和实现的js function

    以下分别对上面的3大块进行描述:
    (1)html。必须的html有:

    <div id="slider" class="swipe" style="visibility:visible;">  
        <div class="swipe-wrap">  
            <figure>  
                <div>  
                    <img src="img/1.JPG" width="100%" height="100%" />  
                </div>  
            </figure>  
            <figure>  
                <div>  
                    <img src="img/9.JPG" width="100%" height="100%" />  
                </div>              
            </figure>  
        </div>  
    </div>  

    【1】最外层的div的id是自定义的,这个是需要传入到swipe中的
    【2】最外层div的class=”swipe”和第二层div的class=”swipe-wrap”是写死的,swipe会查找这两个样式然后做相应的处理
    【3】第三层的figure,就是我们要滑动元素的单元。
    【4】之后我们的要滑动的内容,就是以figure为单位进行的

    (2)css。必须的css有:

    <style>  
    .swipe {  
        overflow: hidden;  
        visibility: hidden;  
        position: relative;  
    }  
    .swipe-wrap {  
        overflow: hidden;  
        position: relative;  
    }  
    .swipe-wrap > figure {  
        float: left;  
        width: 100%;  
        position: relative;  
    }  
    #slider {  
        max-width: 650px;/* 设置最大的宽度 */  
        margin: 0px auto; /* 居中对齐 */  
    }  
    figure {  
        margin: 0;/* 对齐,四周宽度都为0,在轮播的时候,以整张图片进行移动 */  
    }  
    </style>  

    【1】swipe、swipe-wrap、swipe-wrap > figure,这3个是swipe必须要使用到的,而且里面的样式最好也不要改动(感兴趣的同学可以试着去改动,看会呈现什么效果,蛮好玩的 :))
    【2】#slider是我自己设定的,用于整个空间居中
    【3】figure样式也是自己设定的,但是是必须的,指定所有的figure对齐方式,而且只能设置为0,否则在滑动图片的时候会出现位置的错乱。(为什么会错乱,自己简单研究了下,swipe滑动宽度的像素是根据最外层div的宽度,如果figure的margin没有设置为0,而有间隔时,滑动的宽度就不会是一整张的figure了(figure之间存在空虚))

    (3)js。必须有的js:

    <script src="js/swipe.js"></script>  
    <script>  
    var slider =  
      Swipe(document.getElementById('slider'), {  
        auto: 3000,  
        continuous: true,  
        callback: function(pos) {  
        }  
      });  
    </script>  

    这个就是调用swipe了,这里面的参数有些是可有可无,根据自己的需求来选择,简要说明下swipe的接口参数(js里面是这么称呼的么?):

    startSlide Integer (default:0) - 开始滚动的位置  
    speed Integer (default:300) - 动画滚动的间隔(秒数)  
    auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)  
    continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)  
    disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动  
    stopPropagation Boolean (default:false) - 是否停止事件冒泡  
    callback Function - 幻灯片运行中的回调函数  
    transitionEnd Function - 动画运行结束的回调函数  

    api:

    prev():上一页  
    next():下一页  
    getPos():获取当前页的索引  
    getNumSlides():获取所有项的个数  
    slide(index, duration):滑动方法  

    然后自己要实现的代码就可以写在那些回调函数中(如callback等)

    三、其他
    要在移动设备上要比较好的显示出来,除了上面的主要配置外,还需要另外一些辅助:

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">  
    <meta name="app-mobile-web-app-capable" content="yes">   

    至于上面的含义,大家可百度(程序猿都用Google,但是我上不了,就只能是百度了)之。

    好了,swipe就先介绍到此了,以下在附上我实例的源码,里面还加了一段nav。(swipe自己去下载)
    由于才第一次再csdn上写这么多的文字,弱弱的问下,我看到很其他的文章里面的代码有显示行数,刚在编辑的时候,到处找设置代码行数的地方,没找着,这个不支持么?

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title> xx的相册 </title>  
    <meta name="description" content="xx的相册">  
    <meta name="keywords" content="xxh,album,相册">  
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">  
    <meta name="app-mobile-web-app-capable" content="yes">   
    </head>  
    <style>  
    .swipe {  
        overflow: hidden;  
        visibility: hidden;  
        position: relative;  
    }  
    .swipe-wrap {  
        overflow: hidden;  
        position: relative;  
    }  
    .swipe-wrap > figure {  
        float: left;  
        width: 100%;  
        position: relative;  
    }  
    #slider {  
        max-width: 650px;/* 设置最大的宽度 */  
        margin: 0px auto; /* 居中对齐 */  
    }  
    
    figure {  
        margin: 0;/* 对齐,四周宽度都为0,在轮播的时候,以整张图片进行移动 */  
    }  
    div.swipe {  
        border: 1px solid blue;  
    }  
    .page-swipe nav #position {  
        text-align: center;  
        list-style: none;  
        margin: 0;  
        padding: 0  
    }  
    .page-swipe nav #position li {  
        display: inline-block;  
        width: 10px;  
        height: 10px;  
        border-radius: 10px;  
        background: #141414;  
        box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;  
        margin: 0 2px;  
        cursor: pointer  
    }  
    .page-swipe nav #position li.on {  
        box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);  
        background-color: #1293dc;  
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));  
        background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);  
        background-image: -moz-linear-gradient(top,#1293dc,#0f6297);  
        background-image: -ms-linear-gradient(top,#1293dc,#0f6297);  
        background-image: -o-linear-gradient(top,#1293dc,#0f6297);  
        background-image: linear-gradient(top,#1293dc,#0f6297)  
    }  
    </style>  
    <body class="page-swipe">  
    <div id="slider" class="swipe" style="visibility:visible;">  
        <div class="swipe-wrap">  
            <figure>  
                <div class="face faceInner">  
                    <img src="img/1.JPG" width="100%" height="100%" />  
                </div>  
            </figure>  
            <figure>  
                <div class="face faceInner">  
                    <img src="img/2.JPG" width="100%" height="100%" />  
                </div>  
            </figure>  
            <figure>  
                <div class="face faceInner">  
                    <img src="img/3.JPG" width="100%" height="100%" />  
                </div>  
            </figure>  
        </div>  
    </div>  
    
    <nav>  
    <ul id="position">  
      <li class="on"></li>  
      <li class=""></li>  
      <li class=""></li>  
    </ul>  
    </nav>  
    
    <script src="js/swipe.js"></script>  
    <script>  
    var slider =  
      Swipe(document.getElementById('slider'), {  
        auto: 3000,  
        continuous: true,  
        callback: function(pos) {  
            var i = bullets.length;  
            while(i--){  
                bullets[i].className = ' ';  
            }  
            bullets[pos].className = 'on';  
        }  
      });  
    var bullets = document.getElementById('position').getElementsByTagName('li');  
    </script>  
    </body>  
    </html>  
    展开全文
  • swipe和swiper的区别

    2019-09-30 06:54:45
    swipe.js--移动WEB页面内容触摸滑动类库 参考http://www.jiawin.com/swipe-mobile-touch-slider 1、swipe只提供简单轮播切换,底部的圆点颜色切换需要重新写html,自定义方便。 2、当你用点击或者手势控制了之后...

    swipe.js--移动WEB页面内容触摸滑动类库

    参考http://www.jiawin.com/swipe-mobile-touch-slider

    1、swipe只提供简单轮播切换,底部的圆点颜色切换需要重新写html,自定义方便。

    2、当你用点击或者手势控制了之后,轮播图就不会自动滚动了,需要将swipe.js插件源代码进行修改:

    function stop() {
        //delay = 0;
        delay = options.auto > 0 ? options.auto : 0;
        clearTimeout(interval);
      }

    3、适合简单的轮播需求,体积小,减少资源消耗。

    swiper.js--免费以及轻量级的移动设备触控滑块的js框架

    1、体积比swipe大,swipe一般为10KB,而压缩的swipe.js大概为100KB。

    2、swiper和swipe无关,是两款不同的移动端滑动插件。

    3、swiper功能多且酷炫,模块比较大时可以考虑采用。

    共同点:

    都需要等轮播dom元素加载完成才能调用,否则很容易出错。

     

    转载于:https://www.cnblogs.com/jikaiyang/p/7296173.html

    展开全文
  • swipe

    2019-02-22 17:53:25
    appium+python自动化24-滑动方法封装(swipe) http://www.cnblogs.com/yoyoketang/p/7766878.html
  • swipe和swiper

    千次阅读 2018-02-27 19:46:50
    今天接触到了swipe和swiper,刚开始我一直两者没什么区别,所以就在看swiper,相信部分人和我一样,都入了这个“r”的坑我做的东西不过,一下是我的理解,大神路过请指教!说正题: 直接上代码 使用的是template...
  • HTML5滑动(swipe)事件

    万次阅读 2015-10-23 18:15:13
    移动H5开发中经常用到滑动效果(页面上移、下移、向左滑动、向右滑动等),浏览器并没有内置swipe事件,可以通过touch事件(touchstart、touchmove和touchend)模拟swipe效果。
  • mint-ui swipe组件源码解析

    万次阅读 2017-06-22 15:54:38
    前叙mint-ui组件库中swipe组件,实现的是常见的轮播图效果。但是它的实现方式,和常见的实现有所不同。 常见的实现方式: 通过移动轮播图的wrapper来实现item的切换效果(也就是修改wrapper的translate3d属性来实现)...
  • Swipe-移动端触摸滑动插件swipe.jsA-A+前端博客•移动前端开发•jQuery插件 | 移动前端开发•15469View21文章目录插件特色使用方法设置选项实例注意演示和下载相关插件推荐插件特色swipe.JS是一个比较有名的触摸...
  • mint-ui填坑 mt-swipe保存当前索引

    千次阅读 2018-11-28 15:14:44
    mint-ui填坑 mt-swipe 1.获取当前index template: &amp;amp;lt;mt-swipe ref=&amp;quot;swipe&amp;quot; :auto=&amp;quot;4000&amp;quot; :showIndicators=&amp;quot;false&amp;quot; @...
  • Appium 屏幕页面滑动(swipe函数实现) 一、简介   在Appium中进行屏幕页面的滑动操作,我们可以使用其提供的swipe函数来实现,使用此函数,我们只需要提供起始(x,y)坐标值和滑动结束的坐标值即可。swipe函数(在...
  • 在 Appium 中提供 swipe() 方法来模拟用户滑动屏幕。  swipe() 实现过程 是先通过在屏幕上标记两个坐标,然后再从开始坐标移动到结束坐标。  先看下 swipe 方法定义: def swipe(self, start_x, ...
  • vue-swipe的使用

    2019-03-28 16:22:42
    【新手向】要在页面上要做一个轮播...通过搜索,发现有一个饿了么前端出品的轮播swipe,刚好满足我的需求,而且只有11KB左右足够精简。废话不多说,开整... 1、安装 $ npm install vue-swipe 2、在main.js中添加 im...
  • 前端手机web项目 框架:vue 界面组件:mint-ui ... 经过多轮尝试,差点重写touchstart、touchmove、touchend事件了,终于,发现一个不太理想但是可用的方法, ...在mt-swipe的父元素标签中加入@click="s
  • 1.swipe函数使用方法 driver.swipe(x1, y1, x2, y2, t) (X1,Y1):滑动起始点的坐标 (X2,Y2):滑动结束点的坐标 t:完成滑动所需要的时间,单位为ms,默认为空,可不填。 2.由于不同尺寸的屏幕,长宽以及...
  • 前言 最近需要开发一个新的“微信活动平台”,手机端主页需要...综合比较后发现,Swipe 这款插件还是比较不错的,所以这里特地写一篇文章以像大家推荐,并且作为记录,方便下次查看。 简介 Swipe 是一个轻量级的移动...
  • swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求。 swipe插件的使用主要有四大块: 一、html <div id='slider' class='swipe'> <div class='swipe-wrap'...
  • 最近在学习移动端的知识,学习了几个插件的使用,swipe和swiper都是移动端触摸滑动类的插件,使用方便,比自己写原生或者jQuery要简单很多,今天先总结一下swipe的基本使用和应用,swiper功能更多更酷炫,改天详细的...
  • 移动端h5轮播插件swipe

    千次阅读 2018-01-23 10:20:35
    在移动端的h5页面里,我们经常会有轮播图的需求,如果不需要太多的效果,只是简单的手指滑动和自动轮换效果的话,我比较推荐swipe插件,不过百度搜索到的这个插件,里面介绍的不是很完整,我给大家补充下可能需要的...
1 2 3 4 5 ... 20
收藏数 19,227
精华内容 7,690
关键字:

swipe