【微信小程序 五】ListView上拉加载

前端
listview.js

var page = 0;
var GetList = function (that) {
  that.setData({
    hidden: false
  });
  wx.request({
    url: 'https://IP/wechat/index.php',
    data: {
      type: 'searchcate',
      search: that.data.titles,
      page: page
    },
    success: function (res) {
      console.log("JSON:" + res.data);
      var list = that.data.list;
      if (res.data.data[0] == null) {
        that.setData({
          hiddenitem: true
        });
      }
      if (list.length != 1) {//若果结果只有一条数据,就不刷新
        for (var i = 0; i < res.data.data.length; i++) {
          list.push(res.data.data[i]);
        }
        that.setData({
          list: list
        });
        page++;
      } 
      that.setData({
        hidden: true
      });
    }
  });
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
    titles: '',
    list: [],
    total: 0,
    hidden: true,
    scrollTop: 0,
    scrollHeight: 0,
    hiddenitem: false,
  },
  btnDetail: function (event) {
    wx.navigateTo({
      url: '../desc/desc?url=' + event.currentTarget.dataset.hi
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this//不要漏了这句，很重要//在回调函数中貌似不能使用this
    wx.getSystemInfo({
      success: function (res) {
        console.info(res.windowHeight);
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
    this.setData({
      titles: options.search//获取url参数
    })
    console.log(this.data.titles)//获取本页面data数据
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    GetList(that);
  },
  bindDownLoad: function () {
    var that = this;
    GetList(that);
  },
  scroll: function (event) {
    this.setData({
      scrollTop: event.detail.scrollTop
    });
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
})

---

listview.wxml

<import src="../template/book-item.wxml" />
<view class="container">
<text class="text" hidden="{{!hiddenitem}}" >这本书还在路上……</text>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="project-container">
      <scroll-view hidden="{{hiddenitem}}" scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll">
        <block wx:for="{{list}}" wx:for-item="itemName">
          <view class="project-item"  bindtap="btnDetail" id="tap" data-hi="{{itemName.url}}">
            <template is="bookItem" data="{{itemName}}" />
          </view>
        </block>
      </scroll-view>
    </view>
  </view>

  <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
        </loading>
    </view>
</view>

---

listview.wxss

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

input {
  border: 1px solid #ccc;
}

button::after {
  border-radius: unset;
}

.other-button-hover {
  background-color: #008300 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.input-search {
  width: 71%;
  float: left;
  padding: 2px 5px;
  border-right: none;
}

.input-btn {
  width: 25%;
  border-left-width: 0 !important;
  border-radius: 0px !important;
  padding: 5px 0 0 !important;
}


page {
  display: block;
  min-height: 100%;
  background-color: #fff;
}

.project-container {
  margin: 0;
  background-color: #fff;
}

.project-item {
  background-color: #fff;
  font-size: 30rpx;
  border-bottom: 1px solid #efeff4;
  padding-bottom: 0px;
  margin-bottom: 0px;
  overflow: hidden;
  width:100%;
}

.project-item:last-child {
  margin-bottom: 48rpx;
  border-bottom: none;
}

.item-head {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 27rpx 0 0;
  overflow: hidden;
}

.post-title-before {
  width: 36rpx;
  height: 2rpx;
  overflow: hidden;
  background-color: #d38297;
  float: left;
  margin-top: 39rpx;
}

.post-title {
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
  /**font-size: 26rpx;
  color: #D38297;
  border: 1px solid #D38297;**/
  border-radius: 50rpx;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  color: #f00;
  font-size: 32rpx;
}

.post-title:hover {
  background-color: #eee;
}

.project-img {
  width: 96px;
  height: 120px;
  float: left;
  padding-right: 8px;
  padding-left: 10px;
}

.project-img image {
  width: 100%;
  height: 100%;
  padding-top: 5px;
}

.project-price {
  color: #555;
  float: right;
  height: 42rpx;
  line-height: 42rpx;
  overflow: hidden;
  position: relative;
  top: 24rpx;
}

.item-body {
  color: #6e6e70;
  font-size: 30rpx;
  line-height: 42rpx;
  padding: 0 16rpx;
  min-height: 120px;
}

.project-title {
  line-height: 50rpx;
  color: #555;
  font-size: 30rpx;
  font-family: PingFangSC-Medium;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-title .link {
  color: #002cc4;
  font-size: 26rpx;
  white-space: initial;
}

.project-title .link:hover {
  background-color: #eee;
}

.project-price label, .project-title label {
  color: #aaa;
}

.project-desc {
  line-height: 45rpx;
  padding: 15rpx 24rpx 5px 6rpx;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
  /*display: -webkit-box;*/
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /*max-height: 84rpx;*/
  word-break: break-all;
  color: #aaa;
  min-height: 30px;
}

.project-foot {
  padding: 15rpx 0;
  line-height: 33rpx;
  font-size: 24rpx;
  color: #9e9e9e;
  overflow: hidden;
}

.bid-num {
  float: left;
  line-height: 28rpx;
  vertical-align: middle;
}

.public-time {
  float: right;
  margin-right: 10rpx;
  line-height: 28rpx;
  vertical-align: middle;
}

---

book-item.wxml

<template name="bookItem">
  <view class="item-head" hidden="true">
     <!--<view class="post-title"><text>{{itemName.title}}</text></view>-->
  </view>
  <view class="project-img">
    <image src="{{itemName.img}}"></image>
  </view>
  <view class="item-body">
   <view class="post-title"><text>{{itemName.title}}</text></view>
    <view class="project-desc">{{itemName.info}}</view>
    <view class="project-title" wx:if="{{itemName.review}}"><label>{{itemName.review}}</label></view>
    <view class="project-title" wx:if="{{itemName.time}}">距离还书时间还有:<label>{{itemName.time}}</label>天</view>
  </view>
</template>

---

后端

<?php
/**
 * Created by PhpStorm.
 * User: xubowen
 * Date: 2017/5/16
 * Time: 上午11:45
 */
require 'api.php';
if(isset($_GET['type'])){
    $type=$_GET['type'];
    if($type=="search"){
        if(isset($_GET['search'])&&isset($_GET['page'])){
            $tag=$_GET['search'];
            $page=$_GET['page'];
            $content=getSearch($tag,$page);
            $array=analyseUrl($content);
            echo $array;
        }else{
            echo "请输入search或page参数";
        }
    }else if($type=="desc"){
        if(isset($_GET['url'])){
            $url=$_GET['url'];
            //不使用自己抓取的数据
            //$desc=getDesc($url);
            //$array=analyseDesc($desc);
            //利用豆瓣api实现
            $id=getBookId($url);
            $array=getDoubanBook($id);
            echo $array;
        }else{
            echo "请输入url参数";
        }
    }else if($type=="searchcate"){
        if(isset($_GET['search'])&&isset($_GET['page'])){
            $tag=$_GET['search'];
            $page=$_GET['page'];
            $content=getSearchCate($tag,$page);
            $array=analyseUrl($content);
            echo $array;
        }else{
            echo "请输入search或page参数";
        }
    }else{
        echo "意图不明确，请输入正确type参数";
    }
}else{
    echo "意图不明确，请输入type参数";
}

---