模拟微信下拉页面代码 - 缥缈博客-个人技术博客

模拟微信下拉页面代码

作者: 缥缈     发布于「 网站搭建 」 - 缥缈博客-个人技术博客

2019-9-23 分类: 网站搭建 评论(2)
当前位置:首页 > 网站搭建 > 正文

作者: 缥缈

全网最全的网络资源分享网站

手机扫码查看

标签:

代码微信

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

 

模拟微信下拉页面代码

<!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>此网页由 缥缈博客 提供</center>
    </div>
    <div id="wrapper">
        <div id="container">
            <br><br><br><br><br><br>
            <br><br><br><br><br><br>
            <h2>下拉试试</h2>
            <p>您访问的是 www.btstu.cn </p>
            <p>下拉显示 由 缥缈博客 提供 </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>
分享到:
未经允许不得转载:

作者: 缥缈, 转载或复制请以 超链接形式 并注明出处 缥缈博客-个人技术博客
原文地址: 《模拟微信下拉页面代码》 发布于2019-9-23

评论

  1. #2
    牡丹君幼儿 游客 Lv.1

    真厉害

  2. #1
    pony 游客 Lv.1

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏