Vue.js+ajax+php+mui手机web页面下拉加载数据
Vue.js+ajax+php+mui手机web页面下拉加载数据
实现思路
通过mui.ini配置事件，如果是下拉，执行ajax获取后台php接口数据的函数，获取的数据赋值给Vue.js中的列表，然后实时显示数据
前端代码
<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="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
/**
* 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);}