Vue.js+ajax+php+mui手机web页面下拉加载数据

最新推荐文章于 2021-08-04 16:43:32 发布
最新推荐文章于 2021-08-04 16:43:32 发布
阅读量328 收藏
点赞数
文章标签： php javascript vue.js jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dagjj/article/details/106669939
版权

Vue.js+ajax+php+mui手机web页面下拉加载数据

实现思路

通过mui.ini配置事件，如果是下拉，执行ajax获取后台php接口数据的函数，获取的数据赋值给Vue.js中的列表，然后实时显示数据

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax数据获取</title>
    <script src="js/jquery.js"></script>
    <script src="js/Vue.min.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="stylesheet" />
    <style type="text/css">
        .mui-media {
            font-size: 14px;
        }

        .mui-table-view .mui-media-object {
            max-width: initial;
            width: 90px;
            height: 70px;
        }

        .meta-info {
            position: absolute;
            left: 115px;
            right: 15px;
            bottom: 8px;
            color: #8f8f94;
        }

        .meta-info .author,
        .meta-info .time {
            display: inline-block;
        }

        .meta-info .time {
            float: right;
        }

        .mui-table-view:before,
        .mui-table-view:after {
            height: 0;
        }

        .mui-content>.mui-table-view:first-child {
            margin-top: 1px;
        }

        .banner {
            height: 180px;
            overflow: hidden;
            position: relative;
            background-position: center;
            background-color: #ccc;
        }

        .banner img {
            width: 100%;
            height: auto;
        }

        .banner .title {
            position: absolute;
            left: 15px;
            bottom: 15px;
            width: 90%;
            font-size: 16px;
            font-weight: 400;
            line-height: 21px;
            color: white;
            z-index: 11;
        }
    </style>
</head>
<body>
<!--<div id="newslist">-->
    <!--<div v-for="l in list">-->
        <!--<h2>{{l.title}}</h2>-->
    <!--</div>-->
<!--</div>-->


<div id="list" class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in list">
                <a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)">
                    <img class="mui-media-object mui-pull-left" :src="item.cover">
                    <div class="mui-media-body">
                        <div class="mui-ellipsis-2">{{item.title}}</div>
                    </div>
                    <div class="meta-info">
                        <div class="author">{{item.id}}</div>
                        <div class="time">{{item.time}}</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>


<input type="button" value="2" onclick="f(1)" id="1" style="display: none">

</body>
</html>


<script src="js/mui.min.js"></script>
<script>

    mui.init({

        pullRefresh : {

            container:'#list',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等

            up : {

                height:50,//可选.默认50.触发上拉加载拖动距离

                // auto:true,//可选,默认false.自动上拉加载一次
                auto:false,
                contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容

                contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；

                callback : f//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

            }

        }

    });

    var vue = new Vue({
        el: "#list",
        data: {
            list: [],
            list1:"",
        },
        mounted:function() {
            $.ajax({
                type: "GET",
                url: "https://kjjt.asia/zy2.php",  //建议使用相对路径。
                  //url: "http://wulian.chinajzwl.com/getnewsdata.php",

                data: {"pageindex": "2"},
                dataType: "json",  //kkkkk 不是json，所以解析失败。自己做的时候注意返回值的格式
                success: function (data) {
                    //location.href='xg.php?id='+$id;
                    //console.log(data);
                    // window.location.reload();
                    //alert("成功");
                    vue.list1=data.curtime;
                   vue.list = data.datalist;
                   //console(vue.list);
                }
            });
        },
     });

    function f()
    {
        var a=$("#1").val();
        var b=parseInt(a)+1;
        $pageindex=String(b);
        //alert($pageindex)
        $.ajax({
            type: "GET",
            url: "https://kjjt.asia/zy2.php",  //建议使用相对路径。
//                    url: "http://localhost/first/admin/newsadd.php",
            //url: "http://wulian.chinajzwl.com/getnewsdata.php",
            data: {"pageindex":$pageindex},
            dataType: "json",  //kkkkk 不是json，所以解析失败。自己做的时候注意返回值的格式
            success: function (data) {
                //location.href='xg.php?id='+$id;
                //console.log(data);
                // window.location.reload();
                //alert("成功");
                if (vue.list.length==data.datalist.length)
                {
                    mui("#list").pullRefresh().endPullupToRefresh(true);
                    //alert(1);
                }
                else {
                    $("#1").val(data.pageindex);
                    vue.list = data.datalist;
                    mui('#list').pullRefresh().endPullupToRefresh();
                }
            }
        });
    }
    </script>

后台php

可以直接访问 https://kjjt.asia/zy2.php

<?php
/**
 * Created by PhpStorm.
 * User: zhangduokuo
 * Date: 2020/3/23
 * Time: 10:21
 */
header('Access-Control-Allow-Origin:*');
$newsdata=[];
$pageindex=$_GET["pageindex"];
if(!$pageindex){
    $pageindex=1;
}
//echo ("--------------");
//echo ($pageindex);
//echo ("--------------");
$pagesize=20;
$max=($pageindex-1)*$pagesize;
if ($pageindex>=5)
{
    for($i=1;$i<=60;$i++)
    {
        $new=array("id"=>$i,"title"=>"鏂伴椈".$i);
        $newsdata[$i-1]=$new;
    }

    $returnmsgobj=array("code"=>200,"pageindex"=>$pageindex,"curtime"=>date("Y-m-d H:i:s "), "datalist"=>$newsdata);
    $returnmsgjsonstring=json_encode($returnmsgobj);
    echo($returnmsgjsonstring);
}
else{
for($i=1;$i<=$max;$i++)
{
    $new=array("id"=>$i,"title"=>"鏂伴椈".$i);
    $newsdata[$i-1]=$new;
}
$requests=array("code"=>200,"pageindex"=>$pageindex,"curtime"=>date("Y-m-d H:i:s"),"datalist"=>$newsdata);
$returnmsg_jsonstring=json_encode($requests);
echo($returnmsg_jsonstring);}
张多阔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
08-31
主要介绍了vue实现ajax滚动下拉加载，同时具有loading效果的实现代码，文章包括难点说明，介绍的非常详细，感兴趣的朋友参考下
手机下拉加载特效jquery+php特效
09-02
手机下拉加载特效jquery+php特效
php 下拉刷新 上拉加载,下拉刷新，上拉加载的功能如何实现？
weixin_40000430的博客
03-11 83
在我们的项目中，有的类型的数据是有很多的，不如我们不同种类的商品等等有很多，或者我们的消费记录等等有很多。反正不管是什么数据，如果过多的话，然而我们的手机屏幕大小又是有限的，所以这个时候一页就是现实不完的，所以我们需要上拉的时候在加载数据。还有就是我们加载出来了数据，然后很久我们都保持在这个页面，都没有变动，所以这个时候我们也是需要下拉一下来刷新这些数据。首先，我们新建一个项目，我这里就把项目名称...
php下拉自动加载机制,PHP 类自动加载机制
weixin_30916255的博客
03-11 65
版本PHP5.1.2 之前使用 __autoload() 。PHP5.1.2 之后使用 spl_autoload_register() 。本文以 spl_autoload_register() 进行演示 。包含目录application/controllersapplication/modelsapplication/libs代码实现//包含目录$include_dir = ['applicati...
Ajax实现php页面下拉加载翻页（从mysql中获取数据）
武景涛的博客
08-04 655
下拉翻页是通过ajax请求，把页码传入php处理页，在php处理页中获得分页后到数据库中查询数据并返回json数组对象。演示图操作之前先建数据库，百度自行下载JQ库！基本流程：1.在首页中调用6条数据(本demo以6条数据为一页)并循环遍历显示在页面中2.引入JQ，获取文档高度、窗口高度和滚动条高度，并定义页码变量3.判断滚动条是否触底，如果触底便开始执行ajax、并把页码传给执行页4.在执行页获...
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
vue.js + leaflet.js + 商城各楼层平面地图展示
05-30
在Vue组件中，你可以通过Ajax请求加载GeoJSON数据，然后使用L.geoJSON方法将数据转换为可显示在地图上的图层。 为了实现点击交互，你需要监听地图的`click`事件。当用户点击地图时，事件处理器会检查点击位置是否...
知识图谱可视化，前端 vue.js + d3.js.zip
04-03
Vue.js是一款轻量级的JavaScript框架，它以其易用性、可维护性和组件化特性在前端开发中广受欢迎。而D3.js（Data-Driven Documents）是一个强大的数据可视化库，能够创建各种复杂的图表和图形，特别适合构建动态和...
基于vue.js+servlet+axios的校园社团管理系统.zip
10-16
基于vue.js+servlet+axios的校园社团管理系统 基于vue.js+servlet+axios的校园社团管理系统 基于vue.js+servlet+axios的校园社团管理系统 基于vue.js+servlet+axios的校园社团管理系统 基于vue.js+servlet+axios的...
vue.js+node.js+mysql在线聊天室源码
最新发布
06-13
Vue.js 是一个轻量级的前端JavaScript框架，它以其易用性、灵活性和组件化开发模式而闻名。Vue的核心特性包括虚拟DOM、指令系统、组件化、响应式数据绑定以及生命周期管理。在本项目中，Vue.js被用于构建用户界面，...
php滚动加载加分页小实例
05-20
结合网上的提示，自己写的小实例，里面包含数据库、jquery、和分页，希望对你有点启发
mui上拉加载+选项卡+ajax
12-25
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据，在网上也没有很好的办法，自己研究弄了一个小demo。
PHP瀑布流下拉滚动时加载更多图文_瀑布流带数据库
03-27
PHP瀑布流简介： 1、为了简单操作，数据库使用了access 2、采用PHP+Ajax开发 3、带有社交网站分享功能 4、导航菜单固定
mui上拉加载前端和PHP后端,MUI实现上拉加载和下拉刷新效果
weixin_30423065的博客
03-10 166
本文实例为大家分享了MUI实现上拉加载和下拉刷新展示的具体代码，供大家参考，具体内容如下编写存储过程分页(此处使用T-SQL)CREATE PROC [dbo].[Common_PageList](@tab nvarchar(max),---表名@strFld nvarchar(max), --字段字符串@strWhere varchar(max), --where条件@PageIndex int...
mui下拉加载 php,MUI整合上拉下拉的写法
weixin_35621342的博客
04-08 107
在APP制作过程中，下拉刷新和上拉加载时一直配合使用的一对功能，在之前我们给大家分享过用JS相关的上拉加载和下来刷新，有兴趣的朋友可以参考：MUI进行APP混合开发实现下拉刷新和上拉加载我们先看开下如何在MUI中使用整合的上拉下拉第一步，第二步和下拉刷新一样mui.init({subpages:[{url:pullrefresh-subpage-url,//下拉刷新内容页面地址id:pullref...
Vue完美记住滚动条和实现下拉加载
高先生的猫
08-07 636
滚动条 常见于移动端 App 在滚动点击进入的时候 问题描述 当我们在开发 web app 的时候，经常会遇到一个问题，就是当从一个可滚动的列表页进入到下一个详情页面，然后返回列表页面的时候，很难去还原滚动条的状态，无法记住进来时候的位置。 以前我尝试过很多方法： 有 vue-router 自带的 scrollBehavior，需要记住 scrollTop，然后还原，但是管理这个 scrollTop 显得很麻烦，有的时候还不容易取值 还有使用纯 CSS 的方式，在列表页面放置一个
thinkphp + mui 移动端上拉加载分页
zhangxy
12-17 853
框架thinkphp6，后台代码： public function wClass(){ //每页显示条数 $num = 5; $map[] = ['vi_status','=','1']; //+++++++++++++++++++++++ ajax获取下一页 开始+++++++++++++++++ ...
vue.js+element ui+node.js+socket.io+mysql
05-15
Vue.js 是一种现代的JavaScript框架，用于构建向响应式Web应用程序。它的核心思想是将大型应用程序分割成更小的,可重用的组件。 Element UI 是Vue.js的一个组件框架，提供了许多可轻松集成到Vue.js应用程序中，并对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值