微信小程序-人脸检测中的学生列表

wxml:

<!--pages/list/list.wxml-->
<!-- <text>pages/list/list.wxml</text> -->
<view class="weui-cells weui-cells_after-title">
  <view class="page__bd">
        <view class="weui-panel weui-panel_access">
       <view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="请输入学号或者拼音" value="{{condition}}" focus="{{inputShowed}}" bindinput="inputTyping" />
                  
                </view>
                <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                    <icon class="weui-icon-search" type="search" size="14"></icon>
                    <view class="weui-search-bar__text">搜索</view>
                </label>
            </view>
            <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">搜索</view>


        </view>

            <view class="weui-panel__bd" wx:for="{{student}}">
                <navigator url="../add/add" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" data-id='{{item.id}}'>
                 <view class="weui-cell__hd">
            <image src="{{item.path}}" style="margin-right: 5px;vertical-align: middle;width:80px; height: 80px;"></image>
        </view>
                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                        <view class="weui-media-box__title">{{item.no}}</view>
                        <view class="weui-media-box__desc">{{item.name}} {{item.sex}} {{item.age}}</view>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
</view>

wxss:

/* pages/list/list.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;
}
.weui-panel__hd{
   padding: 50rpx; 
  
}
.weui-search-bar{
  background: wheat;
}

js:

// pages/list/list.js
var page = 1;
var isfinish = false;//加载完毕
function loadmore(that) {
  if (isfinish) return;
  wx.showLoading({
    title: '正在加载中...',
  })

  wx.request({
    url: 'http://****************/face/index.php/home/index/select',
    data: {
      page: page,
      condition: that.data.condition
    },
    success: (res) => {
      wx.hideLoading();
      console.log(res.data);
      // that.setData({ student: res.data });
      // page++;

      if (res.data.student.length > 0) {
        var list = that.data.student;

        for (var i = 0; i < res.data.student.length; i++) {
          list.push(res.data.student[i]);
        }
        that.setData({ student: list });
        page++;

      } else {
        isfinish = true;
      }
      wx.stopPullDownRefresh();
    }
  })
}


Page({

  /**
   * 页面的初始数据
   */
  data: {
    student: [],
    condition: '',//查询
    inputShowed: false,
    conditionl: ""
  },
  // add: function (e) {
  //   console.log(e);
  //   var id = e.currentTarget.dataset.id;
  //   console.log(id);
  //   wx.navigateTo({
  //     url: "../add/add?id=" + id,
  //   })
  // },
  select: function (e) {
    console.log(e);

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    page = 1;
    // wx.request({
    //      url: 'http://*************/face/index.php/home/index/select', //仅为示例，并非真实的接口地址
    //   header: {
    //     'content-type': 'application/json' // 默认值
    //   },
    //   success: (res) => {
    //     console.log(res.data);
    //     this.setData({ student: res.data.student })
    //   }
    // })
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    loadmore(that);
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

    page = 1;
    isfinish = false;
    this.setData({ student: [] });

    loadmore(this);

    wx.showLoading({
      title: '正在刷新',
    })
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

    var that = this;
    loadmore(that);

    wx.showLoading({
      title: '加载更多',
    })
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)

  },

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

  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    page = 1;
    isfinish = false;
    this.setData({ student: [], inputShowed: true });

    loadmore(this);
  },

  inputTyping: function (e) {
    this.setData({
      condition: e.detail.value
    });
  }
})