E企盈营销工具技术服务商 热线:4006-838-530

微信小程序搜索,微信小程序搜索框

E企盈直播平台营销卖货系统

一、功能介绍:根据输入框内输入的内容搜索到自己想要的已有的结果。二、使用方法:在输入框内输入想要查询的内容,下方会出现对应的搜索内容,点击下方搜索,就会得到想要搜索的已有的结果。三、效果展示:四、示例代码:WXML代码!–搜索框–viewformclass=’search__form’bindsubmit=”searchSubmit”viewclass=’search__box’iconclass=’search__icon’type=”search”size=”13″color=”#888″/iconinputvalue=”{{search.searchValue}}”placeholder=”输入搜索内容”bindfocus=”focusSearch”bindinput=”searchActiveChangeinput”auto-focus=”true”name=”teamSearchKeyWords”/buttonwx: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/view/form/view!–搜索框输入内容是下方变化–viewwx:if=”{{search.showClearBtn}}”catchtap=”searchSubmit”viewviewviewiconclass=’search__icon2’type=”search”size=”24″color=”#fff”/icon/viewviewclass=’search__cell_primary’text搜索:/texttextstyle=”margin-left:20rpx;color:#1AAD19;”{{search.searchValue}}/text/view/view/view/view!–blockwx:for=”{{searchResult}}”wx:for-item=”item”wx:key=”id”navigatorurl=”info?teamId={{item.team_id}}”viewviewimagesrc=”{{item.team_avator}}”//viewviewview{{item.team_name}}/viewview{{item.team_intr}}/view/view/view/navigator/block–WXSS代码page{background-color:#EFEFF4;}.search__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1;}.search__box2{position:relative;width:100%;height:120rpx;box-sizing:border-box;z-index:1;}.search__input{height:28px;line-height:28px;font-size:14px;}.search__icon{position:absolute;left:10px;top:7px;}.search__icon2{position:absolute;left:10px;top:8px;}.search__icon__box{position:absolute;background-color:#1AAD19;border-radius:7rpx;width:100rpx;height:100rpx;margin-top:10rpx;margin-left:10rpx;}.search__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;background:#FFFFFF;border:1rpxsolid#E6E6EA;}.search__top{position:relative;padding:8px10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#EFEFF4;border-top:1rpxsolid#D7D6DC;border-bottom:1rpxsolid#D7D6DC;}.search__cell_primary{margin-left:120rpx;padding-top:30rpx;font-size:40rpx;}/.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;}/JS代码Page({//页面初始数据data:{search:{searchValue:”,showClearBtn:false},searchResult:[]},onLoad:function(options){//页面初始化options为页面跳转所带来的参数},onReady:function(){//页面渲染完成},onShow:function(){//页面显示},onHide:function(){//页面隐藏},onUnload:function(){//页面关闭},//输入内容时searchActiveChangeinput:function(e){constval=e.detail.value;this.setData({‘search.showClearBtn’:val!=”?true:false,’search.searchValue’:val})},//点击清除搜索内容searchActiveChangeclear:function(e){this.setData({‘search.showClearBtn’:false,’search.searchValue’:”})},//点击聚集时focusSearch:function(){if(this.data.search.searchValue){this.setData({‘search.showClearBtn’:true})}},//搜索提交searchSubmit:function(){constval=this.data.search.searchValue;if(val){constthat=this,app=getApp();//搜索中提示wx.showToast({title:’搜索中’,icon:’loading’});//搜索请求路径//请根据自己实际情况填写路径,具体请看注意事项wx.request({url:app.globalData.API_URL+’searchTeam’,data:{keywords:val,user_id:app.globalData.myInfo.user_id},method:’GET’,//OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT//header:{},//设置请求的headersuccess:function(res){//success成功返回方法letsearchResult=res.data.data;constlen=searchResult.length;for(leti=0;ilen;i++){searchResult[i][‘team_avator’]=app.globalData.STATIC_SOURCE+searchResult[i][‘team_avator’];}that.setData({searchResult:searchResult,’search.showClearBtn’:false,})},fail:function(){//fail失败返回方法},complete:function(){//completewx.hideToast();}})}}})五、注意事项:据我所知,微信小程序是不能直接连接数据库进行数据操作的,这也是出于安全的考虑。基本上都是先通过wx.request向服务器发起请求,再由服务端程序(如PHP)来对MySQL数据库进行数据操作。下面是小程序端的代码:wx.request({url:’https://www.xxxx.top/test.php’,//此处填写你后台请求地址method:’GET’,header:{‘Content-Type’:’application/json’},data:{},success:function(res){//success成功console.log(res.data);//打印请求返回的结果that.setData({item_list:res.data})},fail:function(res){//fail失败},complete:function(res){//complete完成}})}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序搜索,微信小程序搜索框
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏