JS或者jquery的上拉加载和下拉刷新是怎么实现的

JavaScript026

JS或者jquery的上拉加载和下拉刷新是怎么实现的,第1张

1、首先新建一个html文件,命名为test.html,在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。

2、在test.html文件内,使用button标签创建一个按钮,按钮名称分别为“刷新页面”。

3、在test.html文件内,设置button标签的id为btn,主要用于下面通过该id获得button对象。

4、在js标签内,使用$(function(){ })方法在页面加载完成时,通过window.location.href获得当前页面的链接,并把链接保存在变量url中。

5、在js标签内,通过id(btn)获得button对象,给它绑定click点击事件,实现当按钮被点击时,使用window.location.href方法跳转至url,从而实现刷新页面的效果。

6、在浏览器打开test.html文件,点击按钮,查看实现的效果。

<style>

        .clearfix::after {

            display: block

            content: ""

            clear: both

        }

        ul,

        li {

            list-style: none

        }

        .nav>li {

            float: left

            margin: 0 10px

        }

        .nav>li ul {

            display: none

        }

    </style>

</head>

<body>

    <ul class="nav clearfix">

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

    </ul>

    <script>

        //案例分析:导航栏里面的li都要有鼠标经过效果 所以需要循环注册鼠标事件

        //核心原理:当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏

        var nav = document.querySelector('.nav')

        var lis = nav.children

        for (var i = 0 i < lis.length i++) {

            lis[i].onmouseover = function() {

                this.children[1].style.display = 'block'

            }

            lis[i].onmouseout = function() {

                this.children[1].style.display = 'none'

            }

        }

    </script>

给你需要点击的模块一个bindtap时间

比如

<view bindtap="click">点击我下拉刷新<view>

然后在逻辑层写

click:function(){

this.onPullDownRefresh()

}

onPullDownRefresh: function () {

xxxxxxxxxx(你的下拉刷新触发的操作)

},

刚才仔细看了一遍你的问题好像并不是你想要的答案 不过就这样吧