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)
}
})