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

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

直接上代码：

wxml:

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

wx:for="{{searchData}}"

wx:key="id"

bindtap="jumpVegetables"

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

>

{{item.title}}

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-/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,

/**

* 生命周期函数--监听页面加载

*/

onLhttp://oad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: functionhttp:// () {

},

/**

* 生命周期函数--监听页面隐藏

*/

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.getSearchVegetableWoIMSiFLsSs+"?cid="+"&Key="+searchData+"&pageId="+indexpage).then(function (o) {

//coWoIMSiFLsSnsole.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

}

总结

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。