微信小程序：点击按钮实现数据加载（带模糊查询）-编程知识

效果图

代码

wxml:

<!-- 搜索框-->
<form action="" bindsubmit="search_all_productiond"><view class="search_position"><view class="search"><view class="search_left">工单号:</view><view class="search_right"><input name="wip_entity_name" type="text" /></view></view></view><view class="search_position"><view class="search"><view class="search_left">工序名:</view><view class="search_right"><input name="operation_code" type="text" /></view></view></view><view class="search_position"><view class="search"><view class="search_left">料号:</view><view class="search_right"><input name="item_no" type="text" /></view></view></view><view class="search_position"><view class="search"><view class="search_left">料号名称:</view><view class="search_right"><input name="item_name" type="text" /></view></view></view><view class="search_position"><button class="button" form-type="submit">查询</button></view>
</form>
<!-- 表格 -->
<scroll-view scroll-x="true" style="overflow-x: scroll; white-space: nowrap;margin-right:15%;"><view style="padding:15px 5px;"><view class="table"><view class="table-tr"><view class="table-th1">工单号</view><view class="table-th1">料号</view><view class="table-th1">料号名称</view><view class="table-th1">工序</view><view class="table-th1">单位</view><view class="table-th1">生产日期</view><view class="table-th1">工号</view><view class="table-th1">生产人员</view><view class="table-th1">生产数量</view><view class="table-th1">不良数量</view><view class="table-th1">开始时间</view><view class="table-th1">结束时间</view><view class="table-th1">生产小时</view><view class="table-th1">备注</view></view><view class="table-tr" wx:for="{{list}}" wx:key="unique"><view class="table-td3">{{item.wip_entity_name}}</view><view class="table-td2">{{item.item_no}}</view><view class="table-td2">{{item.item_name}}</view><view class="table-td2">{{item.operation_code}}</view><view class="table-td2">{{item.uom}}</view><view class="table-td2">{{item.transaction_date}}</view><view class="table-td2">{{item.employee_num}}</view><view class="table-td2">{{item.employee_name}}</view><view class="table-td2">{{item.transaction_quantity}}</view><view class="table-td2">{{item.bad_quantity}}</view><view class="table-td2">{{item.begin_date}}</view><view class="table-td2">{{item.end_date}}</view><view class="table-td2">{{item.hours_diff}}</view><view class="table-td2" wx:if="{{item.remark}}">{{item.remark}}</view><view class="table-td2" wx:else></view></view></view></view>
</scroll-view>
<button class="last" bindtap="bindMore" wx:if="{{!allDataLoaded}}">点击获取更多</button>

增加按钮

<button class="last" bindtap="bindMore" wx:if="{{!allDataLoaded}}">点击获取更多</button>

js:

const app = getApp()
Page({data: {search: app.globalData.icon + 'index/search.png',list: [], page: 1,pageSize: 20,allDataLoaded: false,wip_entity_name:'',operation_code:'',item_no:'',item_name:'',},// 进入页面显示onLoad: function () {this.loadData();},// //模糊查询待排程信息search_all_productiond(e) {let wip_entity_name = e.detail.value.wip_entity_name //工单号let operation_code = e.detail.value.operation_code //工序let item_no = e.detail.value.item_no //料号let item_name = e.detail.value.item_name //料号this.setData({wip_entity_name:wip_entity_name,operation_code:operation_code,item_no:item_no,item_name:item_name,})this.setData({list: [],page: 1,allDataLoaded: false});this.loadData();},// 加载数据loadData: function () {wx.request({url: app.globalData.position + 'Produce/search_all_productiond',data: {username: app.globalData.username,page: this.data.page, // 传递页码和每页数量pageSize: this.data.pageSize,wip_entity_name:this.data.wip_entity_name,operation_code:this.data.operation_code,item_no:this.data.item_no,item_name:this.data.item_name,},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {console.log(res.data);const data = res.data;//检查data.info是否存在并且是一个数组if (Array.isArray(data.info)) {// 判断是否还有更多数据console.log('data.info.length'+data.info.length)console.log('this.pageSize'+this.data.pageSize)if (data.info.length < this.data.pageSize) {this.hasMoreData = false;this.setData({allDataLoaded: true //标志着数据全部加载完毕})}} else {this.setData({allDataLoaded: false //标志着数据全部加载完毕})}// 拼接新数据const newList = this.data.list.concat(data.info);this.setData({list: newList,count: data.count});},fail(res) {console.log("查询失败");},complete: () => {// 停止下拉刷新wx.stopPullDownRefresh();}});},// 滚动到底部触发加载更多数据loadMoreData: function () {if (!this.data.allDataLoaded) {this.setData({page: this.data.page + 1});this.loadData();}},//加载按钮bindMore: function () {if (!this.data.allDataLoaded) {this.setData({page: this.data.page + 1});this.loadData();}},//刷新onPullDownRefresh() {this.onLoad(); //需要再次调用接口的函数 setTimeout(function () {// 不加这个方法真机下拉会一直处于刷新状态，无法复位wx.stopPullDownRefresh()}, 3000)},onShareAppMessage:function(){//清空登录信息wx.removeStorageSync('username');//返回登录页面return {title: '标品杰生产系统',path: '/pages/login/main/main',imageUrl: '/images/share/title.png',}},
})

wxss:

/* 表格 */
/* 表格样式 */
.table {font-size:85%;display: table;width: 200%;border-collapse: collapse;box-sizing: border-box;
}
.table-tr {display: table-row;
}
.table-th1 {width:40%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color:#51aad6;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-th2 {width:40%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color:#51aad6;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-th3 {width:40%;display: table-cell;font-weight: bold;border: 1rpx solid gray;background-color:#51aad6;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-td1{width:40%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-td2 {width:40%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;padding: 5px 0;overflow: hidden;text-overflow: ellipsis;word-break: break-all;
}
.table-td3 {width:40%;display: table-cell;border: 1rpx solid gray;text-align: center;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;word-break: break-all;/* padding: 5px 0; */
}
/* 超链接 */
.a{color:rgb(20, 119, 185);
}
/* 搜索框 */
.search_position{display: flex;align-items: center;justify-content: center;width:100%;margin:5% 0;
}
.search{width:90%;/* border:1px solid black; */display: flex;
}
.search_left{font-size:105%;font-weight: bold;color:rgb(90, 90, 90);width:30%;
}
.search_right{border-bottom:1px solid rgb(95, 95, 95);width:70%;
}
.button{margin:5%;background-color:#40A4D6;color:#fff;
}

后端thinkphp:

 public function search_all_productiond(){$username = input('post.username');$wip_entity_name = input('post.wip_entity_name');$operation_code = input('post.operation_code');$item_no = input('post.item_no');$item_name = input('post.item_name');$page = input('post.page', 1, 'intval'); // 每页显示数量$pageSize = input('post.pageSize', 10, 'intval'); // 每页显示数量$data['info'] = db::table('wip_operation_plan');$employee_num = db::table('fa_account_info')->where(['username' => $username])->value('employee_num');//数据$data['info'] = db::table('wip_transactions')->alias('d') //设置wip_jobs_all的别名->join(['wip_jobs_all' => 'a'], 'd.wip_entity_name=a.wip_entity_name')// ->join(['so_lines_all' => 'e'], 'a.so_header_number=e.order_number AND a.so_line_number=e.line')// ->join(['so_headers_all' => 'b'], 'b.order_number=e.order_number')->join(['sf_item_no' => 'c'], 'a.primary_item=c.item_no')->field('d.*,c.item_no as item_no,c.item_name as item_name,c.units as uom')->where(['employee_num' => $employee_num])->where(['d.wip_entity_name'  =>  ['like', '%' . $wip_entity_name . '%'],'d.operation_code'  =>  ['like', '%' . $operation_code . '%'],'c.item_name'  =>  ['like', '%' . $item_name . '%'],'c.item_no'  =>  ['like', '%' . $item_no . '%'],])->order(array('end_date' => 'desc'))->limit(($page - 1) * $pageSize, $pageSize)->select();//不加分页条件的总数量$data['count'] = db::table('wip_transactions')->alias('d') //设置wip_jobs_all的别名->join(['wip_jobs_all' => 'a'], 'd.wip_entity_name=a.wip_entity_name')// ->join(['so_lines_all' => 'e'], 'a.so_header_number=e.order_number AND a.so_line_number=e.line')// ->join(['so_headers_all' => 'b'], 'b.order_number=e.order_number')->join(['sf_item_no' => 'c'], 'a.primary_item=c.item_no')->field('d.*,c.item_no as item_no,c.item_name as item_name,c.units as uom')->where(['employee_num' => $employee_num])->where(['d.wip_entity_name'  =>  ['like', '%' . $wip_entity_name . '%'],'d.operation_code'  =>  ['like', '%' . $operation_code . '%'],'c.item_name'  =>  ['like', '%' . $item_name . '%'],'c.item_no'  =>  ['like', '%' . $item_no . '%'],])->order(array('end_date' => 'desc'))->count();for ($i = 0; $i < count($data['info']); $i++) {//计算时差$data['info'][$i]['hours_diff'] = number_format(($data['info'][$i]['end_date'] - $data['info'][$i]['begin_date']) / 3600, 4);if ($data['info'][$i]['transaction_type'] != '良品') {$data['info'][$i]['hours_diff'] = '';}//处理时间$data['info'][$i]['transaction_date'] = date('Y-m-d', $data['info'][$i]['transaction_date']);$data['info'][$i]['begin_date'] = date('Y-m-d H:i:s', $data['info'][$i]['begin_date']);$data['info'][$i]['end_date'] = date('Y-m-d H:i:s', $data['info'][$i]['end_date']);if (!$data['info'][$i]['transaction_quantity']) {$data['info'][$i]['transaction_quantity'] = '';}//员工姓名$data['info'][$i]['employee_name'] = db::table('hr_employees')->where(['employee_num' => $data['info'][$i]['employee_num']])->value('employee_name');}echo json_encode($data);}