wxml
viewviewviewviewviewicontype="search"size="14"/iconinputtype="text"placeholder="沪A6789"maxlength='10'value="{{inputVal}}"focus="{{inputShowed}}"bindinput="inputTyping"/viewwx:if="{{inputVal.length0}}"bindtap="clearInput"icontype="clear"size="14"/icon/view/view/viewviewbindtap="hideInput"取消/view/viewviewwx:if="{{inputVal.length0}}"!--搜索列表--viewwx:for="{{list}}"wx:key="key"!--列表名称--viewclass='list_name'data-index='{{index}}'data-id='{{item.deviceId}}'data-name='{{item.carNum}}'bindtap='btn_name'!--昵称--labelclass='lab_name'{{item.carNum}}/label/view/view/view/view/viewviewviewviewwx:for="{{carList}}"wx:key="{{index}}"viewclass='msg'style="{{item.txtStyle}}"bindtouchstart="touchS"bindtouchmove="touchM"bindtouchend="touchE"data-index="{{index}}"data-car="{{item.carNum}}"viewclass='carstate'bindtap='carState'data-index="{{index}}"data-car="{{item.carNum}}"imageclass='header-img'src="{{item.state==5?'/img/driver.png':'/img/car.png'}}"/imageviewclass='user-name'{{item.carNum}}/viewviewclass='msg-text'{{item.deviceId}}/viewimageclass='site-img'data-id="{{item.deviceId}}"src="/img/site.png"bindtap='navmap'/image/viewviewspandata-index="{{index}}"data-name="{{item.carNum}}"bindtap="tryDriver"试驾/spanspandata-name="{{item.carNum}}"bindtap="unBind"解绑/span/view/view/view/view/viewwxss：（注意：引入了全局的框架WeUI）
.searchbar-result{margin-top:0;font-size:14px;}/搜索列表名称/.list_name{position:relative;width:100%;height:90rpx;line-height:90rpx;border-bottom:1rpxsolid#ddd;}/列表名称/.lab_name{position:absolute;left:30rpx;}/serch-index//隐藏滚动条/::-webkit-scrollbar{width:0;height:0;color:transparent;}.msg-item{width:100%;height:145rpx;border-bottom:1rpxsolidrgb(233,233,233);position:relative;left:0;top:0;overflow:hidden;}.msg{position:absolute;width:100%;height:150rpx;left:0;top:0;z-index:100;background-color:#FFF;}.header-img{position:absolute;width:100rpx;height:100rpx;left:20rpx;top:30rpx;border-radius:10%;}.site-img{position:absolute;width:70rpx;height:70rpx;right:50rpx;top:40rpx;border-radius:10%;}.user-name{position:absolute;left:150rpx;top:33rpx;font-weight:600;font-size:33rpx;}.msg-text{position:absolute;left:150rpx;bottom:32rpx;font-size:70%;color:rgb(127,127,127);}.msg-menu{position:absolute;width:100%;height:150rpx;left:0;top:0;z-index:0;}.menu-delete{position:absolute;width:150rpx;height:148rpx;top:1rpx;right:0;background-color:rgb(255,58,50);color:#FFF;text-align:center;line-height:150rpx;}.menu-mark{position:absolute;width:200rpx;height:148rpx;top:1rpx;right:150rpx;background-color:rgb(200,199,205);color:#FFF;text-align:center;line-height:150rpx;}/滑动效果/.inner.del{position:absolute;width:300rpx;height:148rpx;top:1rpx;right:-300rpx;color:#fff;text-align:center;line-height:130rpx;}.draw{border-right:1pxsolid#fff;display:inline-block;width:140rpx;height:142rpx;background:#d6cdcd;}.delete{display:inline-block;width:140rpx;height:142rpx;background:#fd9903;}/end//搜索/.weui-search-bar__input{height:72rpx;}.weui-icon-search_in-box{top:22rpx;}.weui-search-bar__cancel-btn{line-height:70rpx;}.weui-icon-clear{top:4rpx;}js
varapp=getApp()Page({data:{//搜索框状态inputShowed:true,//显示结果view的状态viewShowed:false,//搜索框值inputVal:"",//搜索渲染推荐数据catList:[],btnWidth:300,//删除按钮的宽度单位startX:"",//收支触摸开始滑动的位置},onLoad:function(){varthat=this;//初始化界面that.initEleWidth();},//隐藏搜索框样式hideInput:function(){this.setData({inputVal:"",inputShowed:false});},//清除搜索框值clearInput:function(){this.setData({inputVal:""});},//键盘抬起事件2inputTyping:function(e){console.log(e.detail.value)varthat=this;if(e.detail.value==''){return;}that.setData({viewShowed:false,inputVal:e.detail.value});wx.request({url:app.globalData.root+"car/search.do",data:{"openid":app.globalData.openid,"carNum":e.detail.value},method:'GET',header:{'Content-type':'application/json'},success:function(res){that.setData({carList:res.data})}});},//获取选中推荐列表中的值btn_name:function(res){console.log(res.currentTarget.dataset.index,res.currentTarget.dataset.name);console.log(res.currentTarget.dataset.index,res.currentTarget.dataset.id);varthat=this;that.hideInput();that.setData({viewShowed:true,carNum:res.currentTarget.dataset.name,deviceId:res.currentTarget.dataset.id});},//index-serch//滑动效果touchS:function(e){if(e.touches.length==1){//触摸屏上只有一个触摸点this.setData({//设置触摸起始点水平方向位置//clientX:距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴startX:e.touches[0].clientX});}},touchM:function(e){if(e.touches.length==1){//一个触摸点//手指移动时水平方向位置varmoveX=e.touches[0].clientX;//手指起始点位置与移动期间的差值vardisX=this.data.startX-moveX;//按钮varbtnWidth=this.data.btnWidth;vartxtStyle="";if(disX==0||disX0){//如果移动距离小于等于0，说明向右滑动，文本层位置不变txtStyle="left:0px";}elseif(disX0){//移动距离大于0，文本层left值等于手指移动距离txtStyle="left:-"+disX+"px";if(disX=btnWidth){//控制手指移动距离最大值为删除按钮的宽度txtStyle="left:-"+btnWidth+"px";}}//获取手指触摸的是哪一项varindex=e.currentTarget.dataset.index;//设置该项向左偏移的样式,并消除其他项的偏移样式varlist=this.data.carList;for(varixinlist){ix==index?list[ix].txtStyle=txtStyle:list[ix].txtStyle="";}//更新列表的状态this.setData({carList:list});}},touchE:function(e){if(e.changedTouches.length==1){//一个触摸点//手指移动结束后水平位置varendX=e.changedTouches[0].clientX;//触摸开始与结束，手指移动的距离vardisX=this.data.startX-endX;varbtnWidth=this.data.btnWidth;//如果距离小于删除按钮的1/2，不显示删除按钮vartxtStyle=disXbtnWidth/2?"left:-"+btnWidth+"px":"left:0px";//获取手指触摸的是哪一项varindex=e.currentTarget.dataset.index;//设置偏移的样式varlist=this.data.carList;list[index].txtStyle=txtStyle;//更新列表的状态this.setData({carList:list});}},//获取元素自适应后的实际宽度getEleWidth:function(w){varreal=0;try{varres=wx.getSystemInfoSync().windowWidth;varscale=(750/2)/(w/2);//以宽度750px设计稿做宽度的自适应real=Math.floor(res/scale);returnreal;}catch(e){returnfalse;//Dosomethingwhencatcherror}},initEleWidth:function(){varbtnWidth=this.getEleWidth(this.data.btnWidth);this.setData({btnWidth:btnWidth});},//点击解绑unBind:function(e){varthat=this;console.log(e.currentTarget.dataset.name)//获取列表中要删除项的下标wx.showModal({title:'提示',content:'是否确认解绑',success(res){if(res.confirm){//解绑wx.request({url:app.globalData.root+"car/unBind.do",data:{"openid":app.globalData.openid,"carNum":e.currentTarget.dataset.name},method:'GET',header:{'Content-type':'application/json'},success:function(res){that.getCars(app.globalData.openid);}});}}})},//点击试驾tryDriver:function(e){varthat=this;varindex=e.currentTarget.dataset.index;varlist=that.data.carList;if(list[index].state==5)return;wx.showModal({title:'提示',content:'是否确认试驾',success(res){if(res.confirm){//试驾wx.request({url:app.globalData.root+"car/driver.do",data:{"openid":app.globalData.openid,"carNum":e.currentTarget.dataset.name},method:'GET',header:{'Content-type':'application/json'},success:function(res){if(res.data==0){wx.showToast({title:'车辆维修尚未结束、不可试驾',icon:'none',})return;}//切换图标for(varixinlist){if(ix==index)list[ix].state=5;}//更新列表的状态that.setData({carList:list});}});}}})},//事件处理函数navmap:function(e){wx.navigateTo({url:'../site/site?deviceId='+e.currentTarget.dataset.id})},//显示车辆状态carState:function(e){wx.navigateTo({url:'../state/state?carNum='+e.currentTarget.dataset.car})},});原文作者：祈澈姑娘技术博客：90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131.
关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源200G干货大全。
