微信公众号开发——页面下拉加载更多

最新推荐文章于 2024-05-08 02:25:25 发布
最新推荐文章于 2024-05-08 02:25:25 发布
阅读量3.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oschina_41661541/article/details/83545750
版权

先上图

代码实现：

用的是dropload插件实现的

后台取数据：

/**微信activity json 查询*/
    @ResponseBody
    @RequestMapping(value = "ajaxActivity")
    public PageInfo getajaxlist(Integer no,Integer pageSize,HttpServletRequest request){
        PageHelper.startPage(no,10);
        List<ActBaseinfo> insList = activityService.selectAll();
        SimpleDateFormat simpleDateFormat= new SimpleDateFormat("yyyy-MM-dd");
        for(ActBaseinfo a :insList){
            a.setActtime1(simpleDateFormat.format(a.getActtime()));
        }
        PageInfo page = new PageInfo(insList);
        return page;
    }

前台展现：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://img.ybl-group.com/mescroll/1.3.8/mescroll.min.css">
<#include "_head.ftl">
    <style>
        *{
            margin: 0;
            padding:0;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            -webkit-text-size-adjust:none;
        }
        html{
            font-size:10px;
        }
        body{
            background-color: #f5f5f5;
            font-size: 1.2em;
        }
        .header{
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #ccc;
            background-color: #eee;
        }
        .header h1{
            text-align: center;
            font-size: 2rem;
            font-weight: normal;
        }
        .content{
            max-width: 640px;
            margin: 0 auto;
            background-color: #fff;
        }
        .content .item{
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align:center;
            -webkit-box-align:center;
            box-align:center;
            -webkit-align-items:center;
            align-items:center;
            padding:3.125%;
            border-bottom: 1px solid #ddd;
            color: #333;
            text-decoration: none;
        }
        .content .item img{
            display: block;
            width: 40px;
            height: 40px;
            border:1px solid #ddd;
        }
        .content .item h3{
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            max-height: 40px;
            overflow: hidden;
            line-height: 20px;
            margin: 0 10px;
            font-size: 1.2rem;
        }
        .content .item .date{
            display: block;
            height: 20px;
            line-height: 20px;
            color: #999;
        }
        .opacity{
            -webkit-animation: opacity 0.3s linear;
            animation: opacity 0.3s linear;
        }
        @-webkit-keyframes opacity {
            0% {
                opacity:0;
            }
            100% {
                opacity:1;
            }
        }
        @keyframes opacity {
            0% {
                opacity:0;
            }
            100% {
                opacity:1;
            }
        }
        .dropload-up,.dropload-down{
            position: relative;
            height: 0;
            overflow: hidden;
            font-size: 12px;
            /* 开启硬件加速 */
            -webkit-transform:translateZ(0);
            transform:translateZ(0);
        }
        .dropload-down{
            height: 50px;
        }
        .dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .dropload-load .loading{
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 100%;
            margin: 6px;
            border: 2px solid #666;
            border-bottom-color: transparent;
            vertical-align: middle;
            -webkit-animation: rotate 0.75s linear infinite;
            animation: rotate 0.75s linear infinite;
        }
        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            50% {
                -webkit-transform: rotate(180deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .weui-panel{
            margin-top:5px;
        }
        .weui-panel:before{
            border:none !important;
        }
    </style>
</head>
<#--<body  onscroll="scroll()">-->
<body>
<div class="weui-panel weui-panel_access content">
    <#--<div class="weui-panel__hd">图文组合列表</div>-->
    <div class="weui-panel__bd lists" id="container">
    </div>
</div>
<style>
    .weui-footer {
        margin: 25px 0 10px 0;
    }
</style>
<#include "_foot.ftl">
<script src="js/dropload/dropload.js" type="text/javascript"></script>
<script>
    $(function(){
        // 页数
        var page = 0;    // 每页展示5个
        var size = 10;    // dropload调用
        $('.content').dropload({
            scrollArea : window,
            loadDownFn : function(me){
                page++;            // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: 'rest/weixin/ajaxActivity?no='+page+'&pageSize='+size,//配合后台接口
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.list.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result+="<a href=\"rest/weixin/act_detail?id="+data.list[i].id+"\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                                        "                    <div class=\"weui-media-box__hd\">\n" +
                                        "                        <img class=\"weui-media-box__thumb\" src=\""+data.list[i].actfile+"\">\n" +
                                        "                    </div>\n" +
                                        "                    <div class=\"weui-media-box__bd\">\n" +
                                        "                        <h4 class=\"weui-media-box__title\">"+data.list[i].actnum+"</h4>\n" +
                                        "                        <span  class=\"weui-media-box__desc\" style=\"margin-top:10px;\">"+data.list[i].acttime1+"</span >\n" +
                                        "                    </div>\n" +
                                        "                </a>"
                            }                    // 如果没有数据
                        }else{                        // 锁定
                            me.lock();                        // 无数据
                            me.noData();
                        }                    // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('.lists').append(result);                        // 每次数据插入，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');                    // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    });</script>
</body>
</html>

 

有个派大星
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端】一个简易的下拉加载效果
MarronBan的博客
04-10 1035
业务场景 如图，content的高固定，list-item过多时展现滚动条。 content可以是body或者任意一个div。只要将期望产生滚动条的元素设置为content就行了。 实现方法 以该图片为例，实现下拉加载。 在还未拉动滚动条时，不将全部的list-item展示。 自定义展示多少个，比如上图，展示前3个就可以了。（能撑出滚动条，但又不全部加载完） 拖动滚动条，当到达底部时，加载剩余的N张图片。（N也是自定义） 一个例子 一开始只加载4张图片，滚动条到content底部时，加载一张图片知道
微信公众号开发笔记9（微信小程序、公众号网页实现上拉加载下拉刷新）
MidYear的博客
07-20 423
前端HTML+CSS+JS配合mescroll.js插件实现微信weui手机网页的下拉刷新上拉加载功能
微信小程序开发中的数据分页和加载更多
最新发布
qq_67153941的博客
05-08 207
微信小程序开发中的数据分页和加载更多内容是指在展示大量数据时，将数据分为多个页面，每次加载一定数量的数据，当需要加载更多数据时，再加载下一页的数据。在微信小程序中，数据分页和加载更多通常使用下拉刷新和上拉加载的方式来实现。下面是一个简单的示例代码，用于实现数据分页和加载更多的功能。这样，当用户进行下拉刷新或上拉加载操作时，会触发相应的方法来加载数据和更新页面。对象，用于存储页面需要展示的数据和分页相关的信息。方法中，下拉刷新时重新加载第一页数据，在。方法中，上拉触底时加载下一页数据。表示是否还有更多数据，
30岁以后搞Android已经没有前途？完整PDF
2401_84544780的博客
04-28 443
总之啊，家里没矿的同学们，如果你们想以后的日子过得好一些，多想想你们的业余时间怎么安排吧；技术方面的提升肯定是重中之重，但是技术外的一些“软实力”也不能完全忽视，很多时候升职确实是因为你的技术足够强，但也与你的“软实力”密切相关在这我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅并给下属员工学习的精品资料。
html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
weixin_42227736的博客
06-01 242
原生JS实现微信公众号或网页使用下拉加载和上拉刷新微信浏览器打开网页显示网址安全信息解决办法,网上很多办法，也找了很久，但是最新的很多用不了。先看看效果，是不是亲想要的，可以跳过，以免浪费宝贵时间。用微信打开以下网址浏览效果(用微信打开)：http://atigege.com/case/web/wxPull/我的解决思路：1、直接在样式表里的html和body上加上：touch-action:no...
详解nodejs微信公众号开发——1.接入微信公众号
10-20
本篇文章主要介绍了详解nodejs微信公众号开发——1.接入微信公众号，非常具有实用价值，需要的朋友可以参考下
详解nodejs微信公众号开发——4.自动回复各种消息
10-20
主要介绍了详解nodejs微信公众号开发——4.自动回复各种消息，非常具有实用价值，需要的朋友可以参考下
详解nodejs微信公众号开发——6.自定义菜单
10-20
主要介绍了详解nodejs微信公众号开发——6.自定义菜单，自定义菜单能够帮助公众号丰富界面，让用户更好更快地理解公众号的功能。
H5在微信公众号的下拉刷新实现
你究竟是想一辈子卖糖水，还是希望获得改变世界的机会？
12-25 1万+
由于项目需要在微信公众号做“健康资讯”相关的，所以会用到下拉刷新，可是使用的原生H5做页面，不过希望能够做到和app原生一样的下拉刷新效果，然后在网上找了找H5下拉刷新相关的资料，具体有：Iscroll，MUI,Hook.js,dragloader 等，它们宣称都可以很好的解决下拉刷新的问题，但是我查看的具体的官网文档和例子后，我还是选择了Iscroll作为本次的下拉刷新实现，因为其它的技术要么文档
微信公众号上拉加载下拉刷新
qq_38062785的博客
01-11 3353
最近再再做一个公众号的项目有需要用到上拉加载，下拉刷新的技术。在网上找了很久，终于找到一个很好用 js 插件，今天我就把这个插件分享给大家，该包可用于App和微信公众号 ， 资源下载地址：https://download.csdn.net/download/qq_38062785/10910494 这个插件的用法很简单只是需要对 Ajax 技术有一定的了解： 先加载资源包 &lt...
微信公众号页面禁止页面下拉查看网页来源
WanFengZhou
03-23 2103
微信公众号页面禁止页面下拉查看网页来源 应产品需求加一个禁止页面下拉查看网页来源的功能，网上看了下结合自己的情况完美实现， JS代码如下 function noPullDown(selector) { //禁止页面拖动 document.querySelector('body').addEventListener('touchmove', function (e) { ...
微信公众号和微信浏览器中网页实现下拉刷新
weixin_30399155的博客
11-06 1337
原生JS实现微信公众号或网页使用下拉加载和上拉刷新 微信浏览器打开网页显示网址安全信息，导致下拉刷新用不了。解决办法,网上很多办法，也找了很久，但是最新的很多用不了。后来自己根据网上的一些资料，造了个轮子。先看看效果，是不是亲想要的，可以跳过，以免浪费宝贵时间。用微信打开以下网址浏览效果（用微信打开）：http://atigege.com/case/web/wxPull/ git...
微信开发之下拉刷新上拉加载更多
LVXIANGAN的专栏
04-25 2221
微信小程序实现“下拉刷新、上拉加载更多”功能，有两种实现方式： 方式1：利用页面的onPullDownRefresh和onReachBottom实现： onPullDownRefresh: 下拉刷新 监听用户下拉刷新事件。 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。 onReachBottom: 上拉触底 监听用户上拉触底事件。 可以在app.json
微信小程序之加载更多（分页加载）实例 —— 微信小程序实战系列（2）
热门推荐
michael的博客
02-24 9万+
上拉加载（分页加载）   当用户打开一个页面时，假设后台数据量庞大时，一次性地返回所有数据给客户端，页面的打开速度就会有所下降，而且用户只看上面的内容而不需要看后面的内容时，也浪费用户流量，基于优化的角度来考虑，后台不要一次性返回所有数据，当用户有需要再往下翻的时候，再加载更加数据出来。   业务需求： 列表滚动到底部时，继续往上拉，加载更多内容   必备参数： （1）pagein
微信小程序-下拉刷新，上拉加载更多
杨哲丶的专栏
09-28 3万+
继续小程序之旅，这一次把项目优化了一下布局，不至于那么丑了，然后实现了上拉加载更多，下拉刷新
微信小程序-下拉刷新与加载更多
sunshao904
10-25 1423
下拉刷新 实现下拉刷新目前能想到的有两种方式 调用系统的API，系统有提供下拉刷新的API接口 下拉刷新API.png 监听scroll-view,自定义下拉刷新，还记得scroll-view里面有一个bindscrolltoupper属性吗？忘记请自行回顾上一篇 微信小程序实战篇-电商（二）当滚动到顶部/左边，会触发 scrolltoupper 事件，所以我们可以利用这个属性，来
微信公众号 token php,微信公众号开发——access_token的获取
05-30
获取微信公众号的access_token是进行微信公众号开发的必要步骤之一。下面是获取微信公众号access_token的php代码示例： ```php //替换APPID和APPSECRET为自己的值 $appid = "your appid"; $appsecret = "your app...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值