纯前端实现模糊查询功能，并实现分页加载~
tip：先在本地存储好数据
wxml：
<view class="page">
<view class="flex-row-start seach">
<input type="text" placeholder="请输入关键词进行搜索" class="search-input" placeholder-style="color:#C4C4C4"
value="{{ keyWord }}" bindinput="bindInput"></input>
<button class="cu-btn block bg-blue margin-tb-sm lg" catchtap="sureChose">确定</button>
</view>
<scroll-view class="search-main" scroll-y style="height: 100%" lower-threshold="80" upper-threshold="80"
bindscrolltolower="loadNextPage" wx:if="{{ resultList.length > 0 }}">
<view class="main-court" wx:for="{{ resultList }}" wx:key='index' data-item='{{ item }}' catchtap="choseCourt">
{{ index }}{{ item.name }}
</view>
<view wx:if="{{ showTip }}" class="main-tip">------ 到底了 ------</view>
</scroll-view>
<view wx:else class="content-null">暂无数据</view>
</view>wxss：
page {
background-color: #fff;
height: 100%;
}
.page {
height: 100%;
}
.flex-row-start {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.seach {
width: 100%;
height: 120rpx;
box-sizing: border-box;
border-bottom: 1px solid #eee;
position: fixed;
left: 0;
top: 0;
padding: 8rpx 20rpx;
z-index: 9999;
background-color: #fff;
}
.search-input {
width: 560rpx;
height: 80rpx;
box-sizing: border-box;
border: 1px solid #b6b7ba;
margin-right: 10rpx;
border-radius: 5rpx;
font-size: 32rpx;
padding-left: 20rpx;
}
.content-null {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
text-align: center;
color: #666;
padding-top: 300rpx;
}
.search-main {
width: 100%;
box-sizing: border-box;
padding: 130rpx 26rpx 0;
}
.main-court {
border-bottom: 1px solid #eee;
color: #333;
font-size: 34rpx;
padding: 20rpx 28rpx;
}
.main-tip {
font-size: 20rpx;
color: #a2a2a2;
padding: 50rpx 0;
text-align: center;
}js：
const app = getApp()
import {
debounce
} from '../../../utils/debounce.js'
// import RECORDS from './court.js'
Page({
/**
* 页面的初始数据
*/
data: {
courtsList: [],
keyWord: '',
hasChose: false,
resultList: [],
// 分页
totalPage: 1,
pageSize: 20,
currentPage: 1,
showTip: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取所有列表信息
this.fetchCourts()
},
// 存储所有列表信息到本地
saveCourts() {
wx.setStorageSync('courtsLocal', RECORDS)
},
// 获取所有列表信息
fetchCourts() {
this.data.courtsList = wx.getStorageSync('courtsLocal')
},
// 输入框输入
bindInput: debounce(function (e) {
let keyWord = e.detail.value.replace(/(^\s*)/g, "")
if (keyWord) {
wx.showLoading({
mask: true,
title: '加载中...'
})
this.fetchResult(keyWord)
} else {
this.setData({
resultList: []
})
}
this.setData({
keyWord,
hasChose: false
})
}, 500),
// 获取模糊查询列表
fetchResult(e) {
this.setData({
resultList: []
})
this.data.currentPage = 1
let resultAll = []
this.data.courtsList.forEach(item => {
if (item.name.indexOf(e) >= 0) {
resultAll.push(item)
}
})
this.data.resultAll = resultAll
this.data.totalPage = Math.ceil(resultAll.length / this.data.pageSize)
console.log(resultAll, this.data.totalPage)
this.pagingResult()
},
// 对模糊查询列表进行分页
pagingResult() {
console.log('分页加载数据ing')
let resultList = []
let resultAll = this.data.resultAll
let pageSize = this.data.pageSize
let currentPage = this.data.currentPage
// 计算初始坐标
let start = pageSize * currentPage - pageSize
let end = pageSize * currentPage
// 临界值判断
end = end > resultAll.length ? resultAll.length : end
for (let i = start; i < end; i++) {
resultList.push(resultAll[i])
}
resultList = this.data.resultList.concat(resultList)
this.setData({
resultList
}, () => {
wx.hideLoading()
})
},
// 选择模糊搜索结果
choseCourt(e) {
console.log(e.currentTarget.dataset.item)
let keyObj = e.currentTarget.dataset.item
let keyWord = keyObj.name
this.setData({
keyWord,
hasChose: true
})
this.fetchResult(keyWord)
},
// 确定
sureChose() {
let hasChose = this.data.hasChose
if (hasChose) {
console.log(this.data.keyWord)
} else {
let title = ''
if (this.data.keyWord && this.data.resultList.length > 0) {
title = '请选择xxx'
} else if (this.data.keyWord && this.data.resultList.length == 0) {
title = '无匹配的xxx，请重新输入'
} else {
title = '请输入关键词进行搜索'
}
wx.showToast({
icon: 'none',
title
})
}
},
// 滚动到底部触发事件
loadNextPage() {
wx.showLoading({
mask: true,
title: '加载中...'
})
console.log('滚动到底部触发事件')
let currentPage = this.data.currentPage
currentPage = currentPage + 1
if (currentPage > this.data.totalPage) {
console.log('到底啦~')
this.setData({
showTip: true
})
wx.hideLoading()
} else {
this.setData({
showTip: false
})
this.data.currentPage = currentPage
this.pagingResult()
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
}
})