直接上代码：
wxml:
<wxs src="../wxs/changeimg.wxs" module="changeimg" />
<view class="container">
<view class="search_input">
<image class="back" src="" mode="widthFix"></image>
<input type="text" class="weui-input" maxlength="10" placeholder="搜索" value="{{value}}" bindinput="changeModel" bindconfirm="search" data-key="value"/>
<image class="scan_code" src="" mode="widthFix" ></image>
</view>
<!--搜索菜品做法列表 -->
<view class="modus_operandi">
<view class="search_no" wx:if="{{searchLen==0&&clickEnter==1}}" >
<text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text>
</view>
<view class="modus_operandi_total"
wx:for="{{searchData}}"
wx:key="id"
bindtap="jumpVegetables"
data-cid="{{item.classid}}"
>
<image class="modus_operandi_pic" mode="widthFix" src="{{changeimg.getimageurl(item.defaultpic)}}"></image>
<view class="modus_operandi_title">{{item.title}}</view>
</view>
</view>
</view>
wxss:
page{
background: #fff;
}
.back{
width: 20rpx;
height: 20rpx;
margin-top: 39rpx;
margin-right: 20rpx;
margin-left: 20rpx;
}
.search_input {
height: 110rpx;
padding: 10rpx;
background: url("https://mini.qianjiwang.cn/img/top.png")no-repeat center;
background-size: 100% 700rpx;
display: flex;
position: relative;
}
.search_input input {
height: 70rpx;
background-color: #fff;
border-radius: 50rpx;
font-size: 32rpx;
color: #000;
width: 80%;
margin-left: 0rpx;
background: #a7d9fe;
margin-top: 20rpx;
padding-left: 30rpx;
}
.scan_code{
flex: 1;
width: 40rpx;
height: 40rpx;
margin-left: 30rpx;
margin-top: 27rpx;
}
.modus_operandi{
padding: 20rpx;
display: flex;
flex-wrap: wrap;
margin-top: 50rpx;
}
.modus_operandi_total{
width: 47%;
padding: 10rpx;
}
.modus_operandi_pic{
height:215rpx!important;
border-radius: 10rpx;
}
.modus_operandi_title{
text-align: center;
}
js:
// pages/pro/index.js
import menuData from "../../bindData/rightMenuCtrl.js"
import proData from "../../bindData/searchFoodData.js"
Page({
/**
* 页面的初始数据
*/
data: {
pageName: "",
ShowLonding: { londing: false, message: "", contNone: false },
...menuData.data,
...proData.pageData
},
...menuData.Methods,
...proData.methods,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
/* wx.showLoading({
title: '正在加载...',
});
setTimeout(()=>{
wx.stopPullDownRefresh,
wx.hideLoading();
},2000) */
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
/* wx.showToast({
title: '没有更多数据',
}) */
let that =this
that.getHttpProductMore();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
searchFoodData.js:
var httpClient = require('../utils/HttpClient.js');
var tools = require('../utils/util.js');
import url from "../utils/apiUrl.js"
var pageData = {
inputValue:{},
searchData:{},
searchLen:'',
clickEnter:'0',
};
var ispage = true;
var indexpage = 1;//页数默认为1
var methods = {
//分页
getHttpProductMore: function () {
var self = this;
if (ispage) {
ispage = false;//没有下一页ispage 赋值为false
indexpage++; //页数加1
let searchData= this.data.inputValue.value//获取输入框的值
//console.log('页',indexpage);
wx.showLoading({
title: '正在加载...',
});
httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId="+indexpage).then(function (o) {
//console.log("更多的数据",o);
if (o.length > 0) {//如果长度大于0，使用concat连接起来，ispage赋值为true
var tempData = self.data.searchData;
tempData = tempData.concat(o)
self.setData({ searchData: tempData })
ispage = true;
wx.hideLoading()
}
else {
wx.showToast({
title: '没有更多了',
});
indexpage = 1;
}
});
}
},
search(e){
ispage = true
wx.showLoading({
title: '正在加载...',
});
let searchData= this.data.inputValue.value
console.log('搜索的数据',searchData);
let that=this
let clickEnter=1
httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId=1").then(function(r){
wx.hideLoading();
//console.log("搜索数据",r);
let searchData=r
let searchLen=r.length
that.setData({
searchData,
searchLen,
clickEnter
})
})
} ,
changeModel(e){
let data={};
data[e.currentTarget.dataset.key] = e.detail.value
this.setData({
inputValue:data
})
//console.log(data);
// console.log('data',this.data.inputValue);
} ,
jumpVegetables(e){
const {cid}=e.currentTarget.dataset
wx.navigateTo({
url: '/pages/vegetable-index/vegetable-index?cid='+cid,
success: (result)=>{
},
});
}
}
module.exports = {
pageData: pageData,
methods: methods
}
总结
