1. 程式人生 > >【微信小程式 五】ListView上拉載入

【微信小程式 五】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引數";
}

這裡寫圖片描述