移动端页面小结

浏览数：24 / 时间：2015年06月11日

前不久，做了移动端的需求，移动端真是有好多坑，下面我记录下我遇到的问题：

1、高度占满整个屏幕需要加如下样式：

html{height:100%;};

2、官网zepto.js默认不支持animate函数，需要自己去有选择的添加插件，网址如下：

http://github.e-sites.nl/zeptobuilder/

3、zepto.js不支持scrollTop（返回顶部平滑效果），需要自己写下js效果：

方法一如下代码：

function scroll(selector, animate, viewOffset) {
        $(‘body‘).scrollToBottom (0, ‘200‘);
    }
    $(‘.go_top‘).click(function(e) {
        e.preventDefault();
        scroll( $(‘#wrap‘), true, 30 );
    });
    $.fn.scrollToBottom = function(scrollHeight ,duration) {
        var $el = this;
        var el  = $el[0];
        var startPosition = el.scrollTop;
        var delta = scrollHeight  - startPosition;
        var startTime = Date.now();
        function scroll() {
            var fraction = Math.min(1, (Date.now() - startTime) / duration);
            el.scrollTop = delta * fraction + startPosition;
            if(fraction < 1) {
                setTimeout(scroll, 10);
            }
        }
        scroll();
    };

方法二如下代码：

function scroll(scrollTo, time) {
        var scrollFrom = parseInt(document.body.scrollTop),
            i = 0,
            runEvery = 5; // run every 5ms
        scrollTo = parseInt(scrollTo);
        time /= runEvery;
        var interval = setInterval(function () {
            i++;
            document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom;
            if (i >= time) {
                clearInterval(interval);
            }
        }, runEvery);
    }
    $(‘.go_top‘).click(function () {
        scroll(‘0‘, 200);
    });

返回顶部按钮隐藏显示代码：

$(window).scroll(function(){
        if($(window).scrollTop()>100){
            $(".go_top").removeClass("none");
        }
        else{
            $(".go_top").addClass("none");
        }
    })

4、<input type="text" />文本框输入文本不换行，要想实现换行效果可以用div代替，代码如下：

5、若是只有一行几列情况，可以用display：-webkit-box属性，若是多列每行宽度不一样，导致不整齐。

以上是印象最深的几个问题，日后接着补充。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

移动端页面小结