微信小程序搜索功能实现

js

const config = require('../../utils/config.js')//获取应用实例const app = getApp()Page({data: {search: {searchValue: '',showClearBtn: false},pageNum: 1,pageSize: 30,hasMoreData: true,searchResult: []},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},onReady: function () {// 页面渲染完成},onShow: function () {// 页面显示},onHide: function () {// 页面隐藏},onUnload: function () {// 页面关闭},//输入内容时searchActiveChangeinput: function (e) {const val = e.detail.value;console.log(val);this.setData({'search.showClearBtn': val != '' ? true : false,'search.searchValue': val})},//点击清除搜索内容searchActiveChangeclear: function (e) {this.setData({'search.showClearBtn': false,'search.searchValue': ''})},//点击聚集时focusSearch: function () {console.log("--------------" + this.data.search.searchValue);if (this.data.search.searchValue!='') {this.setData({'search.showClearBtn': true})}console.log("--------------" + this.data.search.showClearBtn);},searchSubmit:function(){var that = this;that.setData({searchResult: [],hasMoreData: true,pageNum: 1})that.doSearch();},//搜索提交doSearch: function () {const val = this.data.search.searchValue;var sessionKey = wx.getStorageSync(config.TOKEN_KEY);if (val) {const that = this,app = getApp();wx.showToast({title: '搜索中',icon: 'loading'});wx.request({url: config.getFullurl("/getContentList"),data: {keyword: val,pageNum: that.data.pageNum,pageSize: that.data.pageSize},header: {'content-type': 'application/x-www-form-urlencoded','WX_TOKEN': sessionKey},method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 设置请求的 headersuccess: function (res) {var contentlistTem = that.data.searchResult;if (res.data.status == 200) {if (that.data.pageNum == 1) {contentlistTem = []}var contentlist = res.data.data.pageData;console.log(that.data.pageNum);console.log(res.data.data);if (that.data.pageNum >= res.data.data.pageInfo.pageCount) {that.setData({searchResult: contentlistTem.concat(contentlist),hasMoreData: false,'search.showClearBtn': false})} else {that.setData({searchResult: contentlistTem.concat(contentlist),hasMoreData: true,pageNum: that.data.pageNum + 1,'search.showClearBtn': false,})}} else {wx.showToast({title: res.data.msg,success: function () {wx.redirectTo({url: '../login/login',})}})}},fail: function () {// failwx.showToast({title: '加载数据失败',icon: none})},complete: function () {// completewx.hideToast();}})}},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.data.pageNum = 1this.doSearch()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.hasMoreData) {this.doSearch()} else {wx.showToast({title: '没有更多数据',})}},})

wxml

<view class="search__top"><form class="search__form" bindsubmit="searchSubmit"><input value="{{search.searchValue}}" placeholder="关键字搜索" class="search__input" bindfocus="focusSearch" bindinput="searchActiveChangeinput" auto-focus="true" name="teamSearchKeyWords" style='padding-left:40rpx' /><view class="search__icon search__active" style="background:none;position:absolute;border:none;left:0;top:10rpx;bottom:0;width:40rpx;"><icon type="search" size="13" color="#888" style="position:absolute;float:left;margin-right:20rpx;"></icon></view> <button wx:if="{{search.showClearBtn}}" catchtap="searchActiveChangeclear" form-type="reset" style="background:none;position:absolute;border:none;right:0;top:0;bottom:0;width:80rpx;"><icon type="clear" size="19" color="#aaa" style="position:absolute;right:15rpx;top:10rpx;z-index:3;"></icon></button> </form></view><view class="panel" wx:if="{{search.showClearBtn}}" catchtap="searchSubmit" ><view class="panel__bd"><view class="media-box media-box_small-appmsg"><view class="cells"><view class="a cell cell_access clearfix"><view class="cell__hd" style="float:left;background-color:#1AAD19;border-radius:7rpx;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;"><icon type="search" size="24" color="#fff" style="margin-top:20rpx;"></icon></view> <view class="cell__bd cell_primary clearfix"><view class="p" style="padding-left:20rpx;font-size:34rpx;float:left;"><text style="color:#000;">搜索:</text><text style="color:#1AAD19;margin-left:20rpx;">{{search.searchValue}}</text></view></view><text class="cell__ft"></text></view></view></view></view></view><block wx:for="{{searchResult}}" wx:for-item="item" wx:key="id" ><navigator url="/pages/detail/detail?contentId={{item.content_id}}"><view class="person__top__wrapper"><!-- <view class="person__top__avatar"><image src="{{item.team_avator}}" /></view> --><view class="person__top__userinfo"><view class="h3 justify">{{item.title}}</view><view class="h4 justify">{{item.release_date}}</view></view></view></navigator></block>

wxss

page{background-color:#EFEFF4;}.person__top__wrapper{width:100%;box-sizing:border-box;padding-left:28rpx;padding-right:28rpx;padding-top:24rpx;padding-bottom:24rpx;border-top:1rpx solid #e5e5e5;border-bottom:1rpx solid #e5e5e5;height:178rpx;margin-top:30rpx;background-color:#fff;position: relative;}.person__top__avatar{border:1rpx solid #e5e5e5;width:130rpx;height:130rpx;overflow: hidden;box-sizing:content-box;float: left;}.person__top__avatar image{width:130rpx;height:130rpx;border-radius:7rpx;}.person__top__userinfo{right:0;overflow: hidden;position: absolute;left:182rpx;box-sizing:border-box;top:44rpx;color:#000;font-family:'微软雅黑';font-weight:500; bottom:44rpx;}.person__top__userinfo .h2{width:300rpx;height:90rpx;line-height:90rpx;font-size:36rpx; }.person__top__userinfo .h3{width:300rpx;height:60rpx;font-size:30rpx; }.person__top__userinfo .h4{width:300rpx;height:30rpx;font-size:24rpx; }.person__top__userinfo::after {content: " ";display: inline-block;height: 17rpx;width: 17rpx;border-width: 2rpx 2rpx 0 0;border-color: #C6C6CB;border-style: solid;-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);position: absolute;top: 50%;margin-top: -10rpx;right: 30rpx;}.person__top__userinfo image{display: inline-block;height: 34rpx;width: 34rpx;top: 50%;margin-top: -17rpx;position: absolute;right: 58rpx;}button::after{border:none;}.person__top__wrapper{margin-top:0;border-top:none;}.panel{width:100%;background: #e5e5e5;position: fixed;top: 37px;left: 0;padding:5px;box-sizing: border-box;z-index: 99;}.clearfix::after{content: "";display: block;height:0;clear: both;}.search__top{width:100%;position: fixed;top:0;left:0;background: #fff;padding:5px;box-sizing: border-box;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;z-index: 100;}.search__top input{background: #e5e5e5;}