微信小程序列表显示

1.首先设计页面

<view class="weui-cells weui-cells_after-title">
  <view class="page__bd">
        <view class="weui-panel weui-panel_access">
         <view class="page__bd">
          <form bindsubmit='formSubmit'>
        <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="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping"  name="condition"/>
                    <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                        <icon type="clear" size="14"></icon>
                    </view>
                </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>
            <button formType="submit" class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}">搜索</button>
            <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
        </view>
        </form>
         </view>
            <view class="weui-cells weui-cells_after-title" wx:for="{{student}}">
                <navigator url="../imgxg/imgxg?id={{item.id}}&no={{item.no}}&name={{item.name}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                        <image class="weui-media-box__thumb" src="{{item.path}}" />
                    </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.id}}  {{item.name}} {{item.sex}} {{item.age}}</view>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
</view>

2.通过js代码获取数据

//获取应用实例
const app = getApp()
var page = 1;
var isfinish = false;//加载完毕
function loadmore(that) {
  if (isfinish) return;
  wx.showLoading({
    title: '正在加载中',
  })
  wx.request({
    url: ,
    data: {
      page: page,
      condition: that.data.condition
    },
    success: (res) => {
      console.log(res.data.data);
      var data = res.data.data;
      wx.hideLoading();
      if (data.length > 0) {
        var student = that.data.student;
        for (var i = 0; i < data.length; i++) {
          student.push(data[i]);
        }
        that.setData({ student: student });
        page++;
      } else {
        isfinish = true;
      }
      wx.stopPullDownRefresh();
    }
  })
}
Page({
  data: {
    student: [],
    inputShowed: false,
    inputVal: "",
    condition: ''
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false,
      condition: '',
      student: []
    });
    page = 1
    loadmore(this)
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  },
  onPullDownRefresh: function () {
    page = 1;
    isfinish = false;
    this.setData({ student: [] });
    loadmore(this);
  },
  onReachBottom: function () {
    var that = this;
    loadmore(that);
    console.log(page)
  },
  formSubmit: function (e) {
    console.log(e.detail.value.condition);
    this.setData({ condition: e.detail.value.condition });
    var that = this
    page = 1
    this.setData({ student: [] })
    loadmore(that)
  },
  onShow: function () {
    loadmore(this)
  }
})