WechatApplet-伪搜索（纯前端）

说明

1.分页 2.返回顶部 3.实时搜索 4.点击搜索 5.自定义组件 6.父组件向子组件传值 7.父组件调用子组件中的方法（函数） 8.子组件向父组件传值 9.清除输入框 10.模糊查询正则匹配 11.全局样式 12.联系：MJ2506562048

1、页面 1.1、html 部分

<view>  <view class="fixed_0_0 back_FFF z_index_9"> <view class="border_b_666" style="display:{{isImg?'block':'none'}}"> <view class="grid_c2_350 padding_l_36 padding_tb_22 grid_row_gap_16"> <view>每页条数：{{cont}}{total}}{page-1}}{totalPage}}{pla}}" btnTitle="{{btnTitle}}" searchType="{{searchType}}" bind:myEvent="onMyEvent">{isImg?'/image/public/towards_top.png':'/image/public/towards_bottom.png'}}"> <view class="{{isImg?'margin_t_570':'margin_t_90'}}"> <view class="dis_r_sb margin_tb_20 padding_tb_20 padding_lr_30 border_b_666" wx:for="{{dataList}}" wx:key="index" bindtap="details" data-item="{{item}}"> <view class="dis_r_fs width_520 font_size_30"> <view class="flex_1 font_weight_700">{{index+1}}、{item.status}}-{{item.title}}{item.url}}" wx:if="{{item.url}}">源码 <backToTop wx:if="{{scrollTop}}"> "usingComponents": { "search": "/components/search/search" }, "navigationBarTitleText": "伪搜索" } 

1.3、JavaScript 部分

const { globalData: { jsonData: { functionList }, showToast } } = getApp(); Page({ /**
   * 页面的初始数据
   */ data: { dataList: [], scrollTop: false, searchType: 1, btnTitle: '搜索', pla: '请输入标题', page: 1, cont: 10, total: 0, totalPage: 0, scrolls: true, isImg: false }, // 展开搜索 showSearch() { this.setData({ isImg: !this.data.isImg, searchType: this.data.searchType }); }, // 选择搜索类型 radioChange({ detail: { value } }) { // 调用子组件的函数方法 this.selectComponent("#searchId").initData(); this.setData({ searchType: value, page: 1, scrolls: true, dataList: [] }); this.getData(); }, // 获取数据 getData() { wx.showLoading({ title: '加载中', mask: true }); let page = this.data.page, totalPage = this.data.totalPage, cont = this.data.cont, dataList = this.data.dataList, newData = []; if (page > totalPage) { this.setData({ scrolls: false }); return showToast('没有更多数据了', 'none', 2000, false); }; for (let i = cont * page - 10; i < page * cont; i++) { const item = functionList[i]; if (item) { newData.push(item); }; }; this.setData({ dataList: [...dataList, ...newData], page: page += 1 }); wx.nextTick(() => { wx.hideLoading(); }); }, // 接收子组件传过来的值 onMyEvent({ detail: { value } }) { if (!value) { this.setData({ dataList: [], page: 1, scrolls: true }); this.getData(); return false }; this.setData({ dataList: [], scrolls: false }); this.setData({ dataList: functionList.filter(function (item) { let inputValue = new RegExp(`(.*)(${value.split('').join(')(.*)(')})(.*)`, 'i'); return item.title.match(inputValue); }) }); if (!this.data.dataList.length) showToast('未找到匹配的数据'); }, // 复制路径 sourceCode({ currentTarget: { dataset: { url } } }) { wx.setClipboardData({ data: url, success() { showToast('链接复制成功', 'success'); // wx.getClipboardData({ //   success(res) { //     console.log(res.data) //   } // }) } }) }, // 跳转到详情页面 details({ currentTarget: { dataset: { item: { path, status } } } }) { switch (status) { case 0: showToast('暂未开发'); break; case 1: wx.navigateTo({ url: '/' + path }); break; case 2: showToast('开发未结束'); break; case 3: showToast('无页面只有源码'); break; default: showToast('已废弃'); break; }; }, /**
   * 生命周期函数--监听页面加载
   */ onLoad: function (options) { this.setData({ total: functionList.length, totalPage: Math.ceil(functionList.length / 10) }); this.getData(); }, /**
   * 生命周期函数--监听页面初次渲染完成
   */ onReady: function () { }, /**
   * 生命周期函数--监听页面显示
   */ onShow: function () { }, /**
   * 生命周期函数--监听页面隐藏
   */ onHide: function () { }, /**
   * 生命周期函数--监听页面卸载
   */ onUnload: function () { }, /**
   * 页面相关事件处理函数--监听用户下拉动作
   */ onPullDownRefresh: function () { }, /**
   * 页面上拉触底事件的处理函数
   */ onReachBottom: function () { if (this.data.scrolls) { this.getData(); } }, /**
   * 用户点击右上角分享
   */ onShareAppMessage: function () { }, /**
   * 监听滚动条
   */ onPageScroll: function ({ scrollTop }) { this.setData({ scrollTop: scrollTop >= 100 ? true : false }) } }) 

2、搜索组件 2.1、html 部分

<view>  <view class="dis_r_sb margin_30" wx:if="{{searchType==1?true:false}}"> <view class="flex_6 dis_r_sb border_666 padding_10 radius_8"> <input class="flex_8 height_50" placeholder="{{pla}}" value="{{clickInput}}" bindinput="clickInputF">{btnTitle}} <view class="dis_r_sb margin_30" wx:if="{{searchType==2?true:false}}"> <view class="flex_6 dis_r_sb border_666 padding_10 radius_8"> <input class="flex_8 height_50" placeholder="{{pla}}" value="{{realTimeInput}}" bindinput="realTimeInputF"> globalData: { jsonData: { functionList }, showToast } } = getApp(); Component({ // 此操作是使用全局样式 options: { addGlobalClass: true }, /**
   * 组件的属性列表
   */ properties: { pla: { type: String, value: '请输入内容' }, btnTitle: { type: String, value: '提交' }, searchType: { type: Number, value: 1 } }, // 实时搜索 realTimeInputF({ detail: { value } }) { this.setData({ realTimeInput: value }); this.triggerEvent('myEvent', { value: this.data.realTimeInput }); }, /**
   * 组件的初始数据
   */ data: { clickInput: null, realTimeInput: null }, /**
   * 组件的方法列表
   */ methods: { // 实时搜索 realTimeInputF({ detail: { value } }) { if (!value) { this.setData({ realTimeInput: null }); }; this.setData({ realTimeInput: value }); this.triggerEvent('myEvent', { value: this.data.realTimeInput }); }, // 点击收集数据 clickInputF({ detail: { value } }) { if (!value.length) { this.triggerEvent('myEvent', { value: '' }); } this.setData({ clickInput: value }); }, // 点击搜索 clickSearch() { let clickInput = this.data.clickInput; if (!clickInput) return showToast('请输入标题'); this.triggerEvent('myEvent', { value: clickInput }); }, // 切换搜索类型的时候初始化数据 initData() { this.setData({ clickInput: null, realTimeInput: null }); }, // 清除 clear() { if (this.properties.searchType == 1 && this.data.clickInput) { this.setData({ clickInput: null }); this.triggerEvent('myEvent', { value: '' }); return false; } if (this.properties.searchType == 2 && this.data.realTimeInput) { this.setData({ realTimeInput: null }); this.triggerEvent('myEvent', { value: '' }); return false; } showToast('请先输入标题'); }, } }) 

3、置顶组件

置顶组件链接

4、演示