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

直接上代码：

wxml:

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

wx:for="{{searchData}}"

wx:key="id"

bindtap="jumpVegetables"

data-cid="{{item.classid}}"

>

{{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-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

}

总结

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