微信小程序> 微信小程序搜索,微信小程序搜索功能实现

微信小程序搜索,微信小程序搜索功能实现

浏览量:1282 时间: 来源:Powerful_Current
js
constconfig=require('../../utils/config.js')//获取应用实例constapp=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){constval=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(){varthat=this;that.setData({searchResult:[],hasMoreData:true,pageNum:1})that.doSearch();},//搜索提交doSearch:function(){constval=this.data.search.searchValue;varsessionKey=wx.getStorageSync(config.TOKEN_KEY);if(val){constthat=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){varcontentlistTem=that.data.searchResult;if(res.data.status==200){if(that.data.pageNum==1){contentlistTem=[]}varcontentlist=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
viewformbindsubmit="searchSubmit"inputvalue="{{search.searchValue}}"placeholder="关键字搜索"bindfocus="focusSearch"bindinput="searchActiveChangeinput"auto-focus="true"name="teamSearchKeyWords"style='padding-left:40rpx'/viewstyle="background:none;position:absolute;border:none;left:0;top:10rpx;bottom:0;width:40rpx;"icontype="search"size="13"color="#888"style="position:absolute;float:left;margin-right:20rpx;"/icon/viewbuttonwx:if="{{search.showClearBtn}}"catchtap="searchActiveChangeclear"form-type="reset"style="background:none;position:absolute;border:none;right:0;top:0;bottom:0;width:80rpx;"icontype="clear"size="19"color="#aaa"style="position:absolute;right:15rpx;top:10rpx;z-index:3;"/icon/button/form/viewviewwx:if="{{search.showClearBtn}}"catchtap="searchSubmit"viewviewviewviewviewstyle="float:left;background-color:#1AAD19;border-radius:7rpx;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;"icontype="search"size="24"color="#fff"style="margin-top:20rpx;"/icon/viewviewviewstyle="padding-left:20rpx;font-size:34rpx;float:left;"textstyle="color:#000;"搜索:/texttextstyle="color:#1AAD19;margin-left:20rpx;"{{search.searchValue}}/text/view/viewtext/text/view/view/view/view/viewblockwx:for="{{searchResult}}"wx:for-item="item"wx:key="id"navigatorurl="/pages/detail/detail?contentId={{item.content_id}}"view!--viewimagesrc="{{item.team_avator}}"//view--viewview{{item.title}}/viewview{{item.release_date}}/view/view/view/navigator/blockwxss
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:1rpxsolid#e5e5e5;border-bottom:1rpxsolid#e5e5e5;height:178rpx;margin-top:30rpx;background-color:#fff;position:relative;}.person__top__avatar{border:1rpxsolid#e5e5e5;width:130rpx;height:130rpx;overflow:hidden;box-sizing:content-box;float:left;}.person__top__avatarimage{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:2rpx2rpx00;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__userinfoimage{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:1pxsolid#e5e5e5;border-bottom:1pxsolid#e5e5e5;z-index:100;}.search__topinput{background:#e5e5e5;}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎