微信小程序中的加载更多（即列表分页）

app.json中：

"window": {"enablePullDownRefresh": true                     //是否开启当前页面下拉刷新
}

wxml中：

<view class="info" wx:for="{{contentlist}}" wx:key="key"><input hidden="{{hidden}}" value="{{item.id}}"/><text>{{item.title}}</text><text class="time">{{item.inputtime}}</text><view><text>{{item.content}}</text></view>
</view>

js中：

data: {hidden: true,                                 //隐藏表单控件page: 1,                                        //当前请求数据是第几页pageSize: 10,                                   //每页数据条数hasMoreData: true,                              //上拉时是否继续请求数据，即是否还有更多数据contentlist: [],                              //获取的数据列表，以追加的形式添加进去
},
// 获取分页列表
getInfo: function (message) {var that = this;wx.showNavigationBarLoading()                 //在当前页面显示导航条加载动画wx.showLoading({                                //显示 loading 提示框title: message,})wx.request({url: 'http://localhost:88/wechat/test.php',  //本地设置不校验合法域名data: { page: that.data.page, count: that.data.pageSize },method: 'post',header: { 'content-type': 'application/x-www-form-urlencoded' },success: function (res) {var contentlistTem = that.data.contentlist;if (res.data.length > 0) {wx.hideNavigationBarLoading()     //在当前页面隐藏导航条加载动画wx.hideLoading()                    //隐藏 loading 提示框if (that.data.page == 1) {contentlistTem = []}var contentlist = res.data;if (contentlist.length < that.data.pageSize) {that.setData({contentlist: contentlistTem.concat(contentlist),hasMoreData: false})} else {that.setData({contentlist: contentlistTem.concat(contentlist),hasMoreData: true,page: that.data.page + 1})}} },fail: function (res) {wx.hideNavigationBarLoading()wx.hideLoading()fail()},complete: function (res) {},})
},/**
* 生命周期函数--监听页面初次渲染完成
*/
onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = thisthat.getInfo('正在加载数据...')
},/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {this.data.page = 1this.getInfo('正在刷新数据')
},/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {if (this.data.hasMoreData) {this.getInfo('加载更多数据')} else {wx.showToast({title: '没有更多数据',})}
},

后台php中：

<?php
// 字符串截取，多余用"..."代替
function cut_str($str, $chang){$len = mb_strlen($str, 'utf-8');if($len > $chang){return mb_substr($str, 0, $chang, 'utf-8').'...';}else{return $str;}
}
// 设置数据库主机名，账号，密码
$conn = mysql_connect("127.0.0.1", "username", "password")or die("Mysql Connect Error");
// 数据库库名
mysql_select_db("hiretianxia");
// 设置编码，否则可能会出错
mysql_query("SET NAMES UTF8");
// 设置时区，避免出错
ini_set("date.timezone", "PRC");
// 分页查找，从小程序中获取传值
$page = $_POST['page'];
$count = $_POST['count'];
$ind = ($page - 1) * $count;
$sql = "select * from article order by id desc limit ".$ind.', '.$count;
$result = mysql_query($sql, $conn);
if (mysql_num_rows($result) > 0) {// 输出小程序数组$data = array();while($row = mysql_fetch_array($result)){//键值对必须用""包裹，不能用''，否则会报错$zifu = '{"id":"'.$row['id'].'","title":"'.cut_str($row['title'], 8).'","content":"'.cut_str(str_replace('&nbsp;', '', strip_tags(htmlspecialchars_decode($row['content']))), 24).'","inputtime":"'.$row['inputtime'].'"}';//将json格式的字符串解码成对象，加true参数时解码成数组$data[] = json_decode($zifu);}//将请求结果转换为json格式，微信只能对json格式的数据进行操作echo json_encode($data, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
}
mysql_close($conn);
?>

注意：以下代码php5.4以上才支持。

JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT

微信小程序中的加载更多（即列表分页）相关推荐

微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
微信小程序上拉加载更多
来个上拉刷新,解决一下上拉问题.上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦.但是呢,scroll-view上拉加载会一到底部就不断的触 ...
微信小程序下拉加载更多带后台解决加载的内容是新加载的view中最后一个view
问题在于数据库查询语句 limit加了两个参数 limit m,n 去掉后面的n 没问题了 wx.request({ url: 'http://localhost:3030/xcxmvc/nr/dl' ...
微信小程序上拉加载更多数据
data: {curpage: 1,list: null }, onLoad: function() {wx.showLoading();var _this = this;/**初始化list*/_t ...
微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore 转载于:https://www.cnblogs.com/cisum/p/10430907.html
微信小程序上拉加载流程
微信小程序上拉加载流程 1.首先需要在微信官方文档把scroll-view这个方法引入进来,然后使用这个方法,在样式里面写scroll-y,代表的是上下滑动,然后给滑动的盒子一个高度,100vh,然后 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...

微信小程序中的加载更多（即列表分页）

微信小程序中的加载更多（即列表分页）相关推荐

最新文章

热门文章