微信小程序之搜索分页功能的实现代码
直接上代码:
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 }
总结
到此这篇关于微信小程序之搜索分页功能的实现代码的文章就介绍到这了,更多相关小程序搜索分页内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!