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

左手的ㄟ右手 2022-10-02 06:45 190阅读 0赞

**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 = this
    	that.getInfo('正在加载数据...')
    },
    
    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {
    	this.data.page = 1
    	this.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(' ', '', 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