微信小程序搜索功能实现

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

微信小程序搜索功能实现相关推荐

微信小程序搜索功能系列一套全
今天说一下小程序首页的搜索功能吧这个搜索功能我是建了一个组件,用组件写的: 上代码: wxml代码 <view class="search"><input pl ...
微信小程序搜索功能！附：小程序前端+PHP后端
开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收 ...
微信小程序搜索功能！附：小程序前端+PHP后端 1
开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收 ...
微信小程序---搜索功能并跳转搜索结果页面
搜索页面: search.wxml页面: <view class="form"><input class="searchInput" valu ...
微信小程序搜索功能的实现（模糊搜索、带历史记录）
搜索页wxml <searchbar bindsearchinput="onSearchInputEvent"></searchbar> <view ...
5分钟搞定微信小程序搜索功能
一.废话不多说,先看效果: 附赠一个时间选择器: 看了效果图,当然要看看如何敲代码实现了~ 二.代码附上: 1.目录结构 2.全部代码: app.js //app.js App({globalData ...
微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能
微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多 wxml页面 <view class="search-he ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
dwcs6怎么添加搜索框_一文教会你微信小程序搜索怎么用、怎么优化
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...

微信小程序搜索功能实现

微信小程序搜索功能实现相关推荐

最新文章

热门文章