微信小程序搜索之侧边栏筛选

目前做了一个微信小程序 商城 需要用到 侧边栏搜索，于是就仿某宝的 功能做了一个，（第一次写 有点low，希望有大神可以帮忙改进，欢迎留言）

用的后台数据，没有上传

先看效果图

.wxml 代码

<scroll-view class="container" style="height: 100%;">
  <view class="search-header">
    <view class="input-box">
      <image class="icon" src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/search2-2fb94833aa.png" bindtap="search"></image>
      <input name="input" class="keywrod" focus="true" value="{{keyword}}" confirm-type="search" bindinput="inputChange" bindconfirm="wxSearchConfirm" placeholder="{{defaultKeyword.keyword}}" />
    </view>
    <view class="right" bindtap="closeSearch">取消</view>
  </view>

  <view class="b">
    <view class="search-result" wx:if="{{ searchStatus && goodsList.length}}">
      <view>筛选：</view>
      <view class="priceFlag" bindtap="priceFlag" data-name="{{priceFlag}}">{{priceFlag}}</view>
      <view></view>
      <view bindtap="show">
        <image class="s_img" src="/static/images/sx.png"></image>
      </view>
    </view>
    <block wx:for="{{goodsList}}" wx:for-index="index" wx:key="{{item.id}}">
      <view class="item">
        <navigator url="../goods/goods?id={{item.id}}&user_id={{user_id}}">
          <image class="img" src="{{item.productAddress}}" mode="scaleToFill"></image>
          <view class="txt">
            <view class="name">{{item.name}}</view>
            <view class="price">￥{{item.price}}</view>
          </view>
          <view class="p_right">
            查看详情 >
          </view>
        </navigator>
      </view>
    </block>
  </view>
  <view class="search-result-empty" wx:if="{{!goodsList.length && searchStatus}}">
    <image class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noSearchResult-7572a94f32.png"></image>
    <text class="text">您寻找的商品还未上架</text>
  </view>
</scroll-view>

<view></view>

<view class="filtrate {{filtrate? '':'none'}}">
  <view class="f_box" bindtap="none">
  </view>
  <view class="f_con">
    <view class="con_box">
      <view class="nav">
        <view class="nav1">材质</view>
        <view class="nav2">
          <view class="" wx:for="{{nav1}}" wx:key="{{item.id}}">
            <view class="n2_name {{item.isSel? 'active':''}}" bindtap="xuanze1" data-id="{{item.id}}" data-index="{{index}}" data-name="{{item.name}}">{{item.name}}</view>
          </view>
        </view>
      </view>
      <view class="nav">
        <view class="nav1">工艺</view>
        <view class="nav2">
          <view class="" wx:for="{{nav2}}" wx:key="{{item.id}}">
            <view class="n2_name {{item.isSel? 'active':''}}" bindtap="xuanze2" data-id="{{item.id}}" data-index="{{index}}" data-name="{{item.name}}">{{item.name}}</view>
          </view>
        </view>
      </view>
      <view class="nav">
        <view class="nav1">表面效果</view>
        <view class="nav2">
          <view class="" wx:for="{{nav3}}" wx:key="{{item.id}}">
            <view class="n2_name {{item.isSel? 'active':''}}" bindtap="xuanze3" data-id="{{item.id}}" data-index="{{index}}" data-name="{{item.name}}">{{item.name}}</view>
          </view>
        </view>
      </view>
      <view class="nav">
        <view class="nav1">款式</view>
        <view class="nav2">
          <view class="" wx:for="{{nav4}}" wx:key="{{item.id}}">
            <view class="n2_name {{item.isSel? 'active':''}}" bindtap="xuanze4" data-id="{{item.id}}" data-index="{{index}}" data-name="{{item.name}}">{{item.name}}</view>
          </view>
        </view>
      </view>
      <view class="nav">
        <view class="nav1">风格</view>
        <view class="nav2">
          <view class="" wx:for="{{nav5}}" wx:key="{{item.id}}">
            <view class="n2_name {{item.isSel? 'active':''}}" bindtap="xuanze5" data-id="{{item.id}}" data-index="{{index}}" data-name="{{item.name}}">{{item.name}}</view>
          </view>
        </view>
      </view>
      <view class="nav">
        <view class="nav1">价格区间(元)</view>
        <view class="price_box">
          <input class="price" value="{{priceMin}}" bindinput="priceMin" placeholder="最低价" placeholder-class="placeholder"/>
          <text>—</text>
          <input class="price" value="{{priceMax}}" bindinput="priceMax" placeholder="最高价" placeholder-class="placeholder"/>
        </view>
      </view>
    </view>
    <view class="btn">
      <view>
        <view bindtap="chongzhi">重置</view>
        <view bindtap="queren">确定</view>
      </view>
    </view>
  </view>
</view>

.js 代码 const Url = app.data.URL这个是后台地址

const app = getApp()
const Url = app.data.URL
let number = 1
let Datalist = []
let navlist = []
let selArr1 = []
let data1 = []
let selArr2 = []
let data2 = []
let selArr3 = []
let data3 = []
let selArr4 = []
let data4 = []
let selArr5 = []
let data5 = []
let alldata = []
Array.prototype.remove = function (val) {
  var index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};
Page({
  /**
   * 页面的初始数据
   */
  data: {
    keyword: '',
    defaultKeyword: {
      keyword: '请输入您要查询的商品'
    },
    goodsList: '',
    searchStatus: false,
    user_id: '',
    filtrate: false,
    background: '#eee',
    color: '#333',
    select: '',
    priceMin: '',
    priceMax: '',
    price_flag: '',
    priceFlag: "价格由低到高",
    nav1: [],
    nav2: [],
    nav3: [],
    nav4: [],
    nav5: []
  },

  priceFlag:function(e){
    let that = this
    let name = e.currentTarget.dataset.name
    console.log(name)
    if (name == '价格由低到高'){
      that.setData({
        priceFlag: '价格由高到低'
      })
      that.queren(0)
      if (alldata == [] && that.data.priceMin == '' && that.data.priceMax){
        
      }
    }else{
      that.setData({
        priceFlag: '价格由低到高'
      })
      that.queren(1)
    }
  },

  closeSearch: function() {
    wx.navigateBack()
  },
  inputChange: function(e) {
    this.setData({
      keyword: e.detail.value
    })
  },
  priceMin: function (e) {
    this.setData({
      priceMin: e.detail.value
    })
  },
  priceMax: function (e) {
    this.setData({
      priceMax: e.detail.value
    })
  },
  wxSearchConfirm: function(event) {
    this.search()
  },
  search: function() {
    Datalist = []
    let that = this
    selArr1 = []
    data1 = []
    selArr2 = []
    data2 = []
    selArr3 = []
    data3 = []
    selArr4 = []
    data4 = []
    selArr5 = []
    data5 = []
    that.setData({
      priceMin: '',
      priceMax: '',
      nav1: [],
      nav2: [],
      nav3: [],
      nav4: [],
      nav5: []
    })
    that.onLoad()
    if (that.data.keyword == "") {
      return false
    }
    wx.getStorage({
      key: 'info',
      success: function(res) {
        that.setData({
          user_id: res.data.user_id
        })
        util.request(api.IndexUrl + "?member_level_id=" + res.data.id + "&pageNum=" + number + "&name=" + that.data.keyword).then(function(res) {
          if (res.message == "success") {
            res.dataList.forEach(val => {
              Datalist.push(val)
            })
            that.setData({
              goodsList: Datalist,
              nexttxt: res.hasNext,
              searchStatus: true
            });
            if (res.hasNext == false) {
              that.setData({
                moretxt2: "已加载全部"
              })
            }
            wx.hideLoading()
          }
        });

      },
    })
  },
  show: function() {
    this.setData({
      filtrate: true
    })
  },
  none: function() {
    this.setData({
      filtrate: false
    })
  },
  xuanze1: function(e) {
    let that = this
    let indexs = e.currentTarget.dataset.index
    let name = e.currentTarget.dataset.id
    if (selArr1.indexOf(indexs) == -1){
      data1.push(name)
      alldata.push(name)
      selArr1.push(indexs);
      that.setData({
        ["nav1[" + indexs + "].isSel"]: true
      })
    }else{
      data1.remove(name)
      alldata.remove(name)
      selArr1.remove(indexs);
      that.setData({
        ["nav1[" + indexs + "].isSel"]: false
      })
    }
    // console.log(alldata)
  },
  xuanze2: function (e) {
    let that = this
    let indexs = e.currentTarget.dataset.index
    let name = e.currentTarget.dataset.id
    if (selArr2.indexOf(indexs) == -1) {
      data2.push(name)
      alldata.push(name)
      selArr2.push(indexs);
      that.setData({
        ["nav2[" + indexs + "].isSel"]: true
      })
    } else {
      data2.remove(name)
      alldata.remove(name)
      selArr2.remove(indexs);
      that.setData({
        ["nav2[" + indexs + "].isSel"]: false
      })
    }
    //console.log(alldata)
  },
  xuanze3: function (e) {
    let that = this
    let indexs = e.currentTarget.dataset.index
    let name = e.currentTarget.dataset.id
    if (selArr3.indexOf(indexs) == -1) {
      data3.push(name)
      alldata.push(name)
      selArr3.push(indexs);
      that.setData({
        ["nav3[" + indexs + "].isSel"]: true
      })
    } else {
      data3.remove(name)
      alldata.remove(name)
      selArr3.remove(indexs);
      that.setData({
        ["nav3[" + indexs + "].isSel"]: false
      })
    }
    // console.log(alldata)
  },
  xuanze4: function (e) {
    let that = this
    let indexs = e.currentTarget.dataset.index
    let name = e.currentTarget.dataset.id
    if (selArr4.indexOf(indexs) == -1) {
      data4.push(name)
      alldata.push(name)
      selArr4.push(indexs);
      that.setData({
        ["nav4[" + indexs + "].isSel"]: true
      })
    } else {
      data4.remove(name)
      alldata.remove(name)
      selArr4.remove(indexs);
      that.setData({
        ["nav4[" + indexs + "].isSel"]: false
      })
    }
    //console.log(alldata)
  },
  xuanze5: function (e) {
    let that = this
    let indexs = e.currentTarget.dataset.index
    let name = e.currentTarget.dataset.id
    if (selArr5.indexOf(indexs) == -1) {
      data5.push(name)
      alldata.push(name)
      selArr5.push(indexs);
      that.setData({
        ["nav5[" + indexs + "].isSel"]: true
      })
    } else {
      data5.remove(name)
      alldata.remove(name)
      selArr5.remove(indexs);
      that.setData({
        ["nav5[" + indexs + "].isSel"]: false
      })
    }
    //console.log(alldata)
  },

  chongzhi:function(){
    this.search()
  },
  queren: function (datas) {
    if (typeof datas == 'object'){
      datas = ''
    }
    // console.log(alldata)
    // console.log(data1)  //  材质
    // console.log(data2)  //  工艺
    // console.log(data3)  //  表面效果
    // console.log(data4)  //  款式
    // console.log(data5)  //  风格
    let that = this
    let priceMin = that.data.priceMin
    let priceMax = that.data.priceMax
    // console.log(priceMin)
    // console.log(priceMax)
    wx.request({
      url: Url + 'product/pagelist?keywords=' + that.data.keyword + '&material[]=' + data1 + '&technology[]=' + data2 + '&SurfaceEffect[]=' + data3 + '&design[]=' + data4 + '&style[]=' + data5 + '&priceMin=' + priceMin + '&priceMax=' + priceMax + '&priceFlag=' + datas + "&userid=" + that.data.user_id,
      method: 'post',
      success(res){
        that.setData({
          goodsList: res.data.dataList,
          nexttxt: res.data.hasNext,
          filtrate: false,
        });
        if (res.hasNext == false) {
          that.data.setData({
            moretxt2: "已加载全部"
          })
        }
      }
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let that = this
    wx.getStorage({
      key: 'info',
      success: function(res) {
        that.setData({
          user_id: res.data.user_id
        })
      },
    })
    wx.request({
      url: Url + 'pattern/byTypeId',
      method: 'post',
      success(res) {
        res.data.dataList.forEach(val => {
          if (val.type == 0) {
            that.setData({
              nav1: val.typeInfo
            })
          } else if (val.type == 1) {
            that.setData({
              nav2: val.typeInfo
            })
          } else if (val.type == 2) {
            that.setData({
              nav3: val.typeInfo
            })
          } else if (val.type == 3) {
            that.setData({
              nav4: val.typeInfo
            })
          } else if (val.type == 4) {
            that.setData({
              nav5: val.typeInfo
            })
          }
        })
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    Datalist = []
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

.wxss 代码

page {
  min-height: 100%;
  background-color: #f4f4f4;
}

.container {
  min-height: 100%;
  background-color: #f4f4f4;
}

.search-header {
  position: fixed;
  top: 0;
  width: 750rpx;
  height: 91rpx;
  display: flex;
  background: #fff;
  border-bottom: 1px solid #fff9f9;
  padding: 0 31.25rpx;
  font-size: 29rpx;
  color: #333;
}

.search-header .input-box {
  position: relative;
  margin-top: 16rpx;
  float: left;
  width: 0;
  flex: 1;
  height: 59rpx;
  line-height: 59rpx;
  padding: 0 20rpx;
  background: #f4f4f4;
}

.search-header .icon {
  position: absolute;
  top: 14rpx;
  left: 20rpx;
  width: 31rpx;
  height: 31rpx;
}

.search-header .del {
  position: absolute;
  top: 3rpx;
  right: 10rpx;
  width: 53rpx;
  height: 53rpx;
  z-index: 10;
}

.search-header .keywrod {
  position: absolute;
  top: 0;
  left: 40rpx;
  width: 506rpx;
  height: 59rpx;
  padding-left: 30rpx;
}

.search-header .right {
  margin-top: 24rpx;
  margin-left: 31rpx;
  margin-right: 6rpx;
  width: 58rpx;
  height: 43rpx;
  line-height: 43rpx;
  float: right;
}

.no-search {
  height: auto;
  overflow: hidden;
  margin-top: 91rpx;
}

.serach-keywords {
  background: #fff;
  width: 750rpx;
  height: auto;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.serach-keywords .h {
  padding: 0 31.25rpx;
  height: 93rpx;
  line-height: 93rpx;
  width: 100%;
  color: #999;
  font-size: 29rpx;
}

.serach-keywords .title {
  display: block;
  width: 120rpx;
  float: left;
}

.serach-keywords .icon {
  margin-top: 19rpx;
  float: right;
  display: block;
  margin-left: 511rpx;
  height: 55rpx;
  width: 55rpx;
}

.serach-keywords .b {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  padding-left: 31.25rpx;
}

.serach-keywords .item {
  display: inline-block;
  width: auto;
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 15rpx;
  border: 1px solid #999;
  margin: 0 31.25rpx 31.25rpx 0;
  font-size: 24rpx;
  color: #333;
}

.serach-keywords .item.active {
  color: #b4282d;
  border: 1px solid #b4282d;
}

.shelper-list {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  background: #fff;
  padding: 0 31.25rpx;
}

.shelper-list .item {
  height: 93rpx;
  width: 687.5rpx;
  line-height: 93rpx;
  font-size: 24rpx;
  color: #333;
  border-bottom: 1px solid #f4f4f4;
}

.sort {
  position: fixed;
  top: 91rpx;
  background: #fff;
  width: 100%;
  height: 78rpx;
}

.sort-box {
  background: #fff;
  width: 100%;
  height: 78rpx;
  overflow: hidden;
  padding: 0 30rpx;
  display: flex;
  border-bottom: 1px solid #d9d9d9;
}

.sort-box .item {
  height: 78rpx;
  line-height: 78rpx;
  text-align: center;
  flex: 1;
  color: #333;
  font-size: 30rpx;
}

.sort-box .item .txt {
  display: block;
  width: 100%;
  height: 100%;
  color: #333;
}

.sort-box .item.active .txt {
  color: #b4282d;
}

.sort-box .item.by-price {
  background: url(//yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png) 155rpx center no-repeat;
  background-size: 15rpx 21rpx;
}

.sort-box .item.by-price.active.asc {
  background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png) 155rpx center no-repeat;
  background-size: 15rpx 21rpx;
}

.sort-box .item.by-price.active.desc {
  background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png) 155rpx center no-repeat;
  background-size: 15rpx 21rpx;
}

.sort-box-category {
  background: #fff;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 40rpx 40rpx 0 0;
  border-bottom: 1px solid #d9d9d9;
}

.sort-box-category .item {
  height: 54rpx;
  line-height: 54rpx;
  text-align: center;
  float: left;
  padding: 0 16rpx;
  margin: 0 0 40rpx 40rpx;
  border: 1px solid #666;
  color: #333;
  font-size: 24rpx;
}

.sort-box-category .item.active {
  color: #b4282d;
  border: 1px solid #b4282d;
}

.cate-item {
  margin-top: 175rpx;
  height: auto;
  overflow: hidden;
}

.cate-item .h {
  height: 145rpx;
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cate-item .h .name {
  display: block;
  height: 35rpx;
  margin-bottom: 18rpx;
  font-size: 30rpx;
  color: #333;
}

.cate-item .h .desc {
  display: block;
  height: 24rpx;
  font-size: 24rpx;
  color: #999;
}

.cate-item .b {
  width: 750rpx;
  padding: 0 6.25rpx;
  height: auto;
  overflow: hidden;
}

.cate-item .list-filter {
  height: 80rpx;
  width: 100%;
  background: #fff;
  margin-bottom: 6.25rpx;
}

.cate-item .b .item {
  float: left;
  background: #fff;
  width: 365rpx;
  margin-bottom: 6.25rpx;
  padding-bottom: 33.333rpx;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.cate-item .b .item-b {
  margin-left: 6.25rpx;
}

.cate-item .item .img {
  width: 302rpx;
  height: 302rpx;
}

.cate-item .item .name {
  display: block;
  width: 365.625rpx;
  height: 35rpx;
  margin: 11.5rpx 0 22rpx 0;
  text-align: center;
  overflow: hidden;
  padding: 0 20rpx;
  font-size: 30rpx;
  color: #333;
}

.cate-item .item .price {
  display: block;
  width: 365.625rpx;
  height: 30rpx;
  text-align: center;
  font-size: 30rpx;
  color: #b4282d;
}

.search-result {
  background: white;
  height: 60rpx;
  display: flex;
}

.search-result>view {
  width: 25%;
  line-height: 60rpx;
}

.search-result>view .s_img {
  width: 50rpx;
  height: 50rpx;
}

.search-result>view:first-child {
  width: 25%;
  line-height: 60rpx;
  padding-left: 20rpx;
}

.search-result>view:last-child {
  text-align: right;
  padding-right: 20rpx;
}

.search-result-empty {
  width: 100%;
  height: 100%;
  padding-top: 300rpx;
}

.search-result-empty .icon {
  margin: 0 auto;
  display: block;
  width: 240rpx;
  height: 240rpx;
}

.search-result-empty .text {
  display: block;
  width: 100%;
  height: 40rpx;
  font-size: 28rpx;
  text-align: center;
  color: #999;
}

.b {
  margin-top: 91rpx;
}

.item {
  height: 180rpx;
  padding: 10rpx;
}

navigator {
  display: flex;
  background: white;
  position: relative;
}

navigator image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}

.txt .name {
  font-size: 34rpx;
  font-weight: 600;
  margin-top: 10rpx;
  margin-bottom: 50rpx;
}

.txt .price {
  color: #b4282d;
}

.p_right {
  position: absolute;
  right: 10rpx;
  top: 10rpx;
  color: #888;
  font-size: 24rpx;
}

.filtrate {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 999;
  display: flex;
}

.filtrate .con_box{
  margin-bottom: 160rpx;
}

.filtrate .f_box {
  width: 30%;
  background: #333;
  opacity: 0.3;
}

.filtrate .f_con {
  width: 70%;
  background: white;
  overflow: auto;
  /* position: relative; */
}

.filtrate .nav {
  padding: 20rpx;
  border-bottom: 1px solid #e7e7e7;
}

.filtrate .nav:first-child {
  padding-top: 0rpx;
}

.filtrate .con_box>view>view:first-child {
  font-size: 28rpx;
  color: #888;
  margin: 20rpx 0;
}

.filtrate .nav2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.filtrate .nav2>view {
  width: 33.3%;
  color: #333;
  height: 100rpx;
  padding: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filtrate .nav2 .n2_name{
  height: 80rpx;
  line-height: 80rpx;
  font-size: 24rpx;
  text-align: center;
  border-radius: 10rpx;
  background: #eee;
  color: #888;
}

.filtrate .nav2 .active{
  background: #ff9f9f;
  color: white
}

.btn {
  position: absolute;
  bottom: 0;
  width: 70%;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff9f9;
  z-index: 999
}

.btn>view {
  display: flex;
  width: 60%;
  height: 60rpx;
}

.btn>view view {
  width: 50%;
  text-align: center;
  line-height: 60rpx;
  font-size: 24rpx;
}

.btn>view view:first-child {
  border-radius: 40rpx 0 0 40rpx;
  background: linear-gradient(to right, #ffc7c7 , #f8b6b6);
  color: white;
}

.btn>view view:last-child {
  border-radius: 0 40rpx 40rpx 0;
  /* margin-left: 80rpx; */
  /* border-radius:40rpx; */
  background: linear-gradient(to right, #ff9f9f , #ff8e8e);
  color: white;
}

.price_box{
  width: 70%;
  margin: 0 auto;
  display: flex;
}

.price_box .price{
  width: 50%;
  background: #eee;
  border-radius: 60rpx;
  text-align: center;
  height: 50rpx;
}

.price_box text{
  color: rgb(175, 175, 175);
  height: 50rpx;
  line-height: 50rpx;
  margin: 0 10rpx;
}

.placeholder{
  font-size: 26rpx;
  color: rgb(207, 207, 207)
}

.priceFlag{
  color: #888
}

.none {
  display: none;
}

好了 写的不好 还请见谅 。。。希望能帮到你
我会慢慢改进的。