微信小程序搜索功能-即速应用

功能：在搜索界面，搜索输入的字符，如果有匹配，就会显示出来。

wxml

view class="page"  view class="page__bd"    view class="weui-search-bar"      view class="weui-search-bar__form"        view class="weui-search-bar__box"          icon class="weui-icon-search_in-box" type="search" size="14"/icon          input type="text" class="weui-search-bar__input" placeholder="沪A6789" maxlength='10' value="{{inputVal}}" focus="{{inputShowed}}"   bindinput="inputTyping" /          view class="weui-icon-clear" wx:if="{{inputVal.length  0}}" bindtap="clearInput"            icon type="clear" size="14"/icon          /view        /view           /view      view class="weui-search-bar__cancel-btn" bindtap="hideInput"取消/view    /view    view class="weui-cells searchbar-result" wx:if="{{inputVal.length  0}}"      !-- 搜索列表 --      view class="weui-cell__bd" wx:for="{{list}}" wx:key="key"        !-- 列表名称 --        view class='list_name'  data-index='{{index}}' data-id='{{item.deviceId}}'         data-name='{{item.carNum}}' bindtap='btn_name'          !-- 昵称 --          label class='lab_name'{{item.carNum}}/label        /view      /view    /view     /view/view view class="item-box"  view class="items"    view wx:for="{{carList}}" wx:key="{{index}}" class="msg-item"      view class='msg' style="{{item.txtStyle}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" data-car="{{item.carNum}}"        view class='carstate' bindtap='carState' data-index="{{index}}" data-car="{{item.carNum}}"         image class='header-img' src="{{item.state == 5 ? '/img/driver.png':'/img/car.png'}}"/image         view class='user-name'{{item.carNum}}/view         view class='msg-text'{{item.deviceId}}/view         image class='site-img' data-id="{{item.deviceId}}" src="/img/site.png" bindtap='navmap'/image      /view        view class="inner del"          span class="draw" data-index="{{index}}" data-name="{{item.carNum}}" bindtap="tryDriver" 试驾/span          span class="delete" data-name="{{item.carNum}}" bindtap="unBind"解绑/span        /view      /view    /view  /view/view

wxss：（注意：引入了全局的框架WeUI）

.searchbar-result{    margin-top: 0;    font-size: 14px;} /* 搜索列表名称 */.list_name{  position: relative;  width: 100%;  height: 90rpx;  line-height: 90rpx;  border-bottom: 1rpx solid #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: 1rpx solid rgb(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: 1px solid #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;}

var app = getApp()Page({  data: {    // 搜索框状态    inputShowed: true,    //显示结果view的状态    viewShowed: false,    // 搜索框值    inputVal: "",    //搜索渲染推荐数据    catList: [],    btnWidth: 300, //删除按钮的宽度单位    startX: "", //收支触摸开始滑动的位置  },  onLoad: function () {    var that = this;    //初始化界面    that.initEleWidth();  },  // 隐藏搜索框样式  hideInput: function () {    this.setData({      inputVal: "",      inputShowed: false    });  },  // 清除搜索框值  clearInput: function () {    this.setData({      inputVal: ""    });  },  // 键盘抬起事件2  inputTyping: function (e) {    console.log(e.detail.value)    var that = 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);    var that = 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) { // 一个触摸点      //手指移动时水平方向位置      var moveX = e.touches[0].clientX;      //手指起始点位置与移动期间的差值      var disX = this.data.startX - moveX;      //按钮      var btnWidth = this.data.btnWidth;      var txtStyle = "";      if (disX == 0 || disX  0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变        txtStyle = "left:0px";      } else if (disX  0) { //移动距离大于0，文本层left值等于手指移动距离        txtStyle = "left:-" + disX + "px";        if (disX = btnWidth) {          //控制手指移动距离最大值为删除按钮的宽度          txtStyle = "left:-" + btnWidth + "px";        }      }      //获取手指触摸的是哪一项      var index = e.currentTarget.dataset.index;      //设置该项向左偏移的样式,并消除其他项的偏移样式      var list = this.data.carList;      for (var ix in list) {        ix == index ? list[ix].txtStyle = txtStyle : list[ix].txtStyle = "";      }      //更新列表的状态      this.setData({        carList: list      });    }  },  touchE: function (e) {    if (e.changedTouches.length == 1) { //一个触摸点      //手指移动结束后水平位置      var endX = e.changedTouches[0].clientX;      //触摸开始与结束，手指移动的距离      var disX = this.data.startX - endX;      var btnWidth = this.data.btnWidth;      //如果距离小于删除按钮的1/2，不显示删除按钮      var txtStyle = disX  btnWidth / 2 ? "left:-" + btnWidth + "px" : "left:0px";      //获取手指触摸的是哪一项      var index = e.currentTarget.dataset.index;      //设置偏移的样式      var list = this.data.carList;      list[index].txtStyle = txtStyle;      //更新列表的状态      this.setData({        carList: list      });    }  },  //获取元素自适应后的实际宽度  getEleWidth: function (w) {    var real = 0;    try {      var res = wx.getSystemInfoSync().windowWidth;      var scale = (750 / 2) / (w / 2); //以宽度750px设计稿做宽度的自适应      real = Math.floor(res / scale);      return real;    } catch (e) {      return false;      // Do something when catch error    }  },  initEleWidth: function () {    var btnWidth = this.getEleWidth(this.data.btnWidth);    this.setData({      btnWidth: btnWidth    });  },  //点击解绑  unBind: function (e) {    var that = 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) {    var that = this;    var index = e.currentTarget.dataset.index;    var list = 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 (var ix in list) {                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    })  },});