小程序搜索弹出搜索内容功能（模糊查询）

作者: 祈澈菇凉 | 来源:发表于2019-01-11 09:50 被阅读105次

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

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

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131.

小程序搜索弹出搜索内容功能（模糊查询）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

小程序

小程序

小程序专题