小程序篩選

預覽

實現過程

app.json中添加

"pages": [
    "pages/filter/index"
  ],

filter/index.wxml

<view class="container">
  <view class="list">
    <view class="search-cat" wx:for="{{searchList}}" wx:for-item="p" wx:for-index="pIndex" wx:key="">
      <view class="search-title">{{p.screenKey}}</view>
      <view class="search-items">
        <view bindtap="onChange" wx:for="{{p.screenValue}}" wx:for-item="g" data-parent-index="{{ pIndex }}" data-index="{{ index }}"
          data-item="{{ p }}" class="item {{ g.checked ? 'active' : '' }}" wx:key=""  >
          {{g.value}}
        </view>
      </view>
    </view>
  </view>
  <view class="search-bottom">
    <view class="cancel" bindtap="doCancel">取消</view>
    <view class="confirm" bindtap="doSubmit">確認</view>
  </view>
</view>

filter/index.wxss

.container {
    padding: 0 0 15px 15px;
    background: #fff;
    min-height: 100vh;
}

.search-title {
    padding: 19px 0;
    font-size: 16px;
    font-weight: 600;
}

.search-items {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.search-items .item {
    min-width: 60px;
    box-sizing: border-box;
    padding: 0 15px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: 500;
    border-radius: 3px;
    margin: 0 20px 15px 0;
    font-size: 14px;
    background: #f3f3f6;
}

.search-items .item.active {
    background: #ff5000;
    color: #fff;
}

.search-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    line-height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    width: 100%;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
}

.search-bottom .cancel {
    background: #ececf0;
    color: #8D8D96;
    flex: 1;
}

.search-bottom .confirm {
    background: #FF5000;
    color: #fff;
    flex: 1;
}

filter/index.js

const App = getApp()
Page({
  data: {
    specialId: '',
    query: ['籃球鞋','36'], 
    searchList: [
      {
        type: 'radio',
        screenKey: '時尚',
        screenValue: ['籃球鞋', '運動鞋', '板鞋', '跑步鞋']
      },
      {
        type: 'radio',
        screenKey: '品牌',
        screenValue: ['阿迪達斯', '耐克', '皮爾卡丹']
      },
      {
        type: 'checkbox',
        screenKey: '尺碼',
        screenValue: [
          '36',
          '36.5',
          '37',
          '37.5',
          '38',
          '38.5',
          '39',
          '39.5',
          '40',
          '40.5',
          '41',
          '41.5',
          '42',
          '42.5',
          '43',
          '43.5'
        ]
      }
    ] // 搜索關鍵詞
  },
  onLoad: function(options) {
    console.log(options)
    // 上個頁面傳遞搜索關鍵詞數組，目前在data裏query設置
    // this.data.query = options.query
    // 搜索關鍵詞
    this.getSearchItems()
  },
  // 獲取搜索選項
  getSearchItems() {
    const _this = this
    // 異步請求數據後處理，這裏直接拿假數據
    const searchItems = this.data.searchList.map(n => {
      return Object.assign({}, n, {
        screenValue: n.screenValue.map(m =>
          Object.assign(
            {},
            {
              checked: _this.data.query.includes(m), // 回顯query裏有返回true
              value: m
            }
          )
        )
      })
    })
    this.setData({
      searchList: searchItems
    })
  },
 // 點擊篩選項
  onChange(e) {
    const { parentIndex, item, index } = e.currentTarget.dataset
    // 若是選中狀態
    if (item.screenValue[index].checked) {
      item.screenValue[index].checked = false // 取消選擇
    } else {
      // 若是不是多選
      if (item.type != 'checkbox') {
        // 所有重置爲未選擇狀態
        item.screenValue.map(n => (n.checked = false))
      }
      // 將點擊的設置爲選中
      item.screenValue[index].checked = true
    }
    this.setData({
      [`searchList[${parentIndex}]`]: item
    })
  },
  // 取消,清空數據返回上一個頁面
  doCancel() {
    // var pages = getCurrentPages() // 獲取頁面棧
    // var prevPage = pages[pages.length - 2] // 前一個頁面
    // prevPage.setData({
    //   query: [], // 重置
    //   isBack: true
    // })
    // // 返回登陸以前的頁面
    // wx.navigateBack({
    //   delta: 1
    // })
  },
  // 提交，攜帶數據返回上一個頁面
  doSubmit() {
    let selected = []
    // 獲取全部選中
    this.data.searchList.map(n => {
      n.screenValue.map(m => {
        if (m.checked == true) {
          selected.push(m.value)
        }
      })
    })
    console.log(selected)
    // var pages = getCurrentPages() // 獲取頁面棧
    // var prevPage = pages[pages.length - 2] // 前一個頁面
    // // 攜帶數據，返回登陸以前的頁面
    // prevPage.setData({
    //   query: selected,
    //   isBack: true
    // })
    // wx.navigateBack({
    //   delta: 1
    // })
  }
})

總結

領導要求寫在新的頁面，就沒有在頁面寫組件，後續若是再改寫成組件，實現的過程相對簡單，有什麼問題能夠留言交流
完整代碼連接github