微信小程序搜索功能实现

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: {}, // 设置请求的 header
        success: 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 () {
          // fail
          wx.showToast({
            title: '加载数据失败',
            icon: none
          })
        },
        complete: function () {
          // complete
          wx.hideToast();
        }
      })
    }
  },
  /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
  onPullDownRefresh: function () {
    this.data.pageNum = 1
    this.doSearch()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.hasMoreData) {
      this.doSearch()
    } else {
      wx.showToast({
        title: '没有更多数据',
      })
    }
  },
})

wxml

    
      

        
         
          
           
        
          
         
      
    
    
      
        
          
            
              
                
               
              
                搜索:{{search.searchValue}}
              
              
            
          
        
      
    
    
    
      
        
        
          {{item.title}}
          {{item.release_date}}
        
      
    
    

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;
}