专栏首页Inkedus模拟微信下拉页面

模拟微信下拉页面

在安卓下 始终不够完美,今天遇到了 iscroll.js,使用 iscroll.js 重新写了一个版本,现在比较完美了。

模拟微信下拉提示的页面

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
    <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
    <style>
    body {
        background: #0099EC;
    }
 
    .wechat_from {
        position: fixed;
        background: #303133;
        top: 0;
        left: 0;
        right: 0;
        /*防止 下拉太长 显示 蓝色背景*/
        height: 300px;
        color: #7A7B7D;
        padding: 10px 0;
        font-size: 12px;
    }
 
    #wrapper {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }
 
    #container {
        background: #0099EC;
        color: #FFF;
        text-align: center;
    }
    </style>
</head>
 
<body>
    <div class="wechat_from">
        <center>此网页由 Inkedus'Blog 提供</center>
    </div>
    <div id="wrapper">
        <div id="container">
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
            <h2>下拉试试</h2>
            <p>您访问的是 o60.cc </p>
            <p>下拉显示 由 Inkedus'Blog 提供 </p>
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
        </div>
    </div>
    <script>
    var myScroll;
 
    function isPassive() {
        var supportsPassiveOption = false;
        try {
            addEventListener("test", null, Object.defineProperty({}, 'passive', {
                get: function() {
                    supportsPassiveOption = true;
                }
            }));
        } catch (e) {}
        return supportsPassiveOption;
    }
 
    window.onload = function() {
        myScroll = new IScroll('#wrapper', { mouseWheel: true });
    }
    document.addEventListener('touchmove', function(e) { e.preventDefault(); }, isPassive() ? {
        capture: false,
        passive: false
    } : false);
    </script>
</body>
 
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP垃圾分类API接口源码

    Inkedus
  • PHP解决JSON中文显示问题

    PHP如何解决JSON中文显示问题?本文主要介绍了PHP JSON格式的中文显示问题解决方法,本文总结了3种解决中文显示u开头字符问题的方法。希望对大家有所帮助...

    Inkedus
  • enphp一个开源加密混淆PHP代码项目

    一个开源加密混淆 PHP 代码项目// a Open Source PHP Code Confusion + Encryption Project

    Inkedus
  • 开源Web程序开发代码自动生成利器推荐:WebMisDeveloper

    [URL=http://www.qidian10.com/View/WebMisDeveloper.html]WebMisDeveloper[/URL]是[UR...

    崔文远TroyCui
  • 分享一个跨浏览器固定定位的方法。

    我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果,这次又看到用这个办法做固定定位的,解开了我一个心结。 其实很简单,就是我...

    练小习
  • 笔记本电脑的数字键numlock总是亮(灭),无法关闭的解决方法

    4月20号的晚上我姐姐的笔记本电脑上的KLIOM键一直不能打出来字母,只能打出数字,本来以为是键盘坏了,后来我仔细一看原来这几个字母键和数字键是在一起的,肯定是...

    崔文远TroyCui
  • ERP LN Job出错后的状态重置源代码

    ERPLN里面的Job可以通过不同的方式来调用执行,如果在Windows平台的话就用类似自动任务的程序来执行如[URL=http://www.networkau...

    崔文远TroyCui
  • Flowportal.Net BPM中2个有用的函数:setvaluefunc和getvaluefunc

    特别感谢Flowportal.Net公司及时快速的技术支持,在Flowportal.Net公司的马丁帮助下,终于搞定了一个在多行表单中动态显示图片的开发,在此整...

    崔文远TroyCui
  • 在Flowportal.Net 3.5t BPM中批量设定输入框、下拉选项的字体颜色

    想了半天也想不好该给这篇文章起个什么标题,其实这篇文章的核心是说当DropDownList使用了disabled属性后,字体变为灰色,怎么办都没法修改字体颜色,...

    崔文远TroyCui
  • 模拟微信下拉页面

    在安卓下 始终不够完美,今天遇到了 iscroll.js,使用 iscroll.js 重新写了一个版本,现在比较完美了。

    墨渊

扫码关注云+社区

领取腾讯云代金券