手机App开发中zy_slide的使用技巧-易之盛软件

    在日常的项目开发过程中，我们会经常有左右或者上下切换的广告图的滑动效果应用场景， 滑动是界面随着手指的移动进行跟随，当松手时根据位移情况来进行平移变换，产生弹动的效果。例如应用Zaker，他的导航页面就采用的横向滑动效果来实现的。我们制作一个类Zaker的范例来演示滑动的使用。

    在普通的Pc站点中我们有许多的Js插件可以使用，但是在手机App中我们应该怎怎样实现这样的效果呢？ 接下来我们就来学习一下AppCan开发框架中的zy_Slide这个方法。

      我们可以看到这个导航页面分为多页，每一页中包含8个条目区位，通过手指左右滑动可以完成页面间切换。我们通过应用zy_slide.js中的zySlide对象来完成这个功能。

       首先是一个容器，它定义了我们的展示区域同时用于监听手指的触摸事件。接着是一个与容器等高宽的滑块，它是用来完成平移操作，最后是多个与滑块等高宽的page，这些page横向排列在滑块中，当滑块平移时，这些page也会随之移动。我们先通过应用构建向导构建一个新工程。这次我们的类Zkaer布局范例没有标题和底部栏，我们从index.html中删掉Header和footer部分。工程中默认的浮动窗口，在这范例中也没有使用，因此可以删掉index_content.html页面，相关的我们也需要去掉index.html中window.uexOnload函数中处理浮动窗口的代码。到此我们准备好了一个空白工程

如下是index.html页面部分代码。

class='um-vp c-wh'ontouchstart>
id='page_0'class='up ub ub-ver'tabindex='0'>

id='content'class='ub-f1 tx-l t-bla ub-img6 res10'>

上述代码中我们可以看到，在page_0中我们只包含了content区域，我们把content作为我们滑动的容器。在其中添加入滑块和几个分页页面。

我们可以看到上面的代码中，我们在content区域里添加了一个slider，这个滑块的高宽与content等高宽(ub-con)，并且这个滑块是一个弹性盒子容器，他的子元素按照横向进行排列。对于每一个分页我们都指定其宽度与滑块等宽(ub-fh)，由于使用弹性盒子模型，所以每个分页的高度也自动与滑块相等。到此我们完成了基本的布局。下面我们引入zy_slide.js文件

src='js/zy_slide.js'>

接着我们在window.uexOnload函数里加入初始化滑动代码

window.uexOnload =function(type){
if(!type){
    $$('slider').slide=new zySlide('slider','H',function(){
},false,function(e){
});
}
}

上述代码中，我们可以看到我们为DIV slider创建了一个自定义属性slide，这个slide属性是一个zySlide对象，在初始化这个对象的时候我们设定了几个参数，第一个参数是此对象所属的滑块控件，第二个参数代表是纵向滑动(V)还是横向滑动(H)，第三个参数是手指滑动结束离开屏幕时的事件回调，第四个参数是用来控制手指触摸事件是否继续分发给下层的DOM控件和浏览器，这里我们不需要进行控制，因此设定为false，最后一个参数是手指松开后，界面自动滑动完成分页切换后执行的回调函数。

至此我们已经了解了AppCan框架中的zy_slide方法的使用步骤及技巧，今后在开发过程中的使用还需要我们自己进行体会，现在我们可以在手机上体验一下滑动的效果了