微信小程序 - 纯前端实现：模糊查询分页功能

纯前端实现模糊查询功能，并实现分页加载~

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

    }
})