微信小程序之搜索分页功能的实现代码

2023-07-22 15:45:14 295

直接上代码：
wxml:











很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~



{{item.title}}

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-repeatcenter;
background-size:100%700rpx;
display:flex;
position:relative;
}
.search_inputinput{
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
importmenuDatafrom"../../bindData/rightMenuCtrl.js"
importproDatafrom"../../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:'没有更多数据',
})*/
letthat=this
that.getHttpProductMore();
},

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

}
})

searchFoodData.js:

varhttpClient=require('../utils/HttpClient.js');
vartools=require('../utils/util.js');
importurlfrom"../utils/apiUrl.js"
varpageData={
inputValue:{},
searchData:{},
searchLen:'',
clickEnter:'0',
};
varispage=true;
varindexpage=1;//页数默认为1
varmethods={
//分页
getHttpProductMore:function(){
varself=this;
if(ispage){
ispage=false;//没有下一页ispage赋值为false
indexpage++;//页数加1
letsearchData=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
vartempData=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:'正在加载...',
});
letsearchData=this.data.inputValue.value
console.log('搜索的数据',searchData);
letthat=this
letclickEnter=1
httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId=1").then(function(r){
wx.hideLoading();
//console.log("搜索数据",r);
letsearchData=r
letsearchLen=r.length
that.setData({
searchData,
searchLen,
clickEnter
})
})
},
changeModel(e){
letdata={};
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

}

总结

到此这篇关于微信小程序之搜索分页功能的实现代码的文章就介绍到这了,更多相关小程序搜索分页内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

微信小程序之搜索分页功能的实现代码

热门推荐

随机推荐