微信H5页面框架设计 h5_slide.js (一)
Html5
93html
云车网,前端工程师
11人收藏 8713次学习

微信H5页面框架设计 h5_slide.js (一)

转自 http://www.suchso.com/projecteactual/h5_slide_js%281%29.html

最近开始自己主动开发移动端相关的页面,之前接触不少移动端页面设计和开发,但大多是作为指手画脚的那个,最近才有机会主动实战之。

准备代码

习惯所致,通常开始写代码之前写一点准备代码, 完全是为了减少代码量方便阅读

$ = function(sel, holder){  
    return [].slice.call( (holder||document).querySelectorAll(sel) );
};
$.on = function(dom, eventType, f){
    [].concat(dom).forEach(function(d){
        eventType.split(/\W+/).forEach(function(type){
            d.addEventListener(type, f ,false);
        });
    });
    return $;
};

 

创建一个类似swiper的切换效果

第一步创建一个类似swiper的切换效果,当然我们只是操作纵向,在CSS3中使用 transform 位置变换 + 过渡效果,很容易实现,关键是需要在事件绑定时候进行计算。另外,如果所有页面都是100%宽100%高的话自然不需要考虑内部滚动事件,我们这里需要考虑更多的事情,所以最好使用额外的一个透明层做事件绑定,然后操作与真实的section内容。

container = $("#container")[0]
holder = document.createElement("div"),
holder.style.cssText = "position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 1;";
container.appendChild(holder);

 

切换的方法

切换的方法我暂且定做  transform_set(dom/*当前section*/, i/*前移还是后移i个section*/); 大概就是酱紫了 

var H = document.documentElement.clientHeight;
        if( "undefined" === typeof i ){
            i = dom | 0;
        }else if( "number" != typeof dom ){
            i = sections.indexOf(dom) + i;
        }
        i = Math.min( Math.max( 0, i ), sections.length - 1);
         
css_model = function(h,l){
            return "-webkit-transform: translate3d("+(l|0)+"px, "+(h|0)+"px, 0); transform: translate3d("+(l|0)+"px, "+(h|0)+"px, 0);";
        };
         
sections.forEach(function(section, index){
                switch(index){
                    case i: 
                        current_index = i;
                        section.style.cssText = css_model();
                        break;
                    case i+1: 
                        section.style.cssText = css_model(H);
                        break;
                    case i-1: 
                        section.style.cssText = css_model(-H);
                        break;
                    default: 
                        section.style.cssText = css_model( (index > i) ? H : -H ); 
                }
            });

 

事件绑定

注意事件绑定的时候需要判断方向,来确定切换是前移还是后移

// 事件
    var startTy, curTy, endTy, autoStep;
    $.on(holder, "touchstart", function(e){
        var touch = e.touches[0];
            startTy = curTy = touch.clientY;
    }).on(holder, "touchend", function(e){
        var touch = e.changedTouches[0],  //只判断单点触控
                endTy = touch.clientY;
        transform_set(sections[current_index], startTy > endTy ? 1 : -1);
        startTy = curTy = endTy = 0;
    }).on(document, "keydown", function(e){    // key 和 mouse 事件只是为了方便PC<a href="http://www.suchso.com/projecteactual/web-server-browser-cache-1.html" class="keylink" title=" 浏览器的缓存原理及缓存方式" target="_blank">浏览器</a>
        switch(e.keyCode){
            case 32: 
            case 39:
            case 40: transform_set(sections[current_index], 20); break;
            case 37:
            case 38: transform_set(sections[current_index], -20); break; 
        }
    }).on(document, "mousewheel", function(e){
        transform_set(sections[current_index], e.wheelDeltaY < 0 ? 20: -20);
    });

这节先到这里,事实上已经完成了一个方便的swiper效果。  然并卵,复杂的内容还木有开始(scrollTop位置检测,内置元素的相对transform设置和参数设计,动画元素分组,图片loading,按钮元素模拟穿透等), 详情关注本系列文章。

 

有一个开发中的Demo(再过几天应该就是成品了):http://cardistry.cn/hero/

也可以扫二维码来玩:

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
HTML5 微信