小程序實現綜合排序頁面布局

在一些場景中，常常會遇到過一個功能，點擊什么篩選的，綜合排序刷新接口數據，就像下面這樣的效果。小程序只是先把頁面布局好，數據字段定義好了，就差和后端溝通，按照我這種數據結構寫接口了，第一次寫小程序項目，開始慢慢踩坑，把遇到的問題都慢慢總結一下，

 

在小程序js文件中，在data定義一下綜合排序，全國，篩選字段，然后通過for循環遍歷渲染到頁面

sortByName:"綜合排序",
    sortAddressName:"全國",
    screenByName:"篩選",
    sortBy:[
      {name:  "綜合排序", select: false},
      { name: "好評優先", select: false },
      { name: "銷量最高", select: false },
      { name: "配送費最低", select: false },
      { name: "人均從高到低", select: false },
      { name: "人均從低到高", select: false }
    ],
    sortAddress:[
      {name:"鄭州",select:false},
      { name: "北京", select: false },
      { name: "上海", select: false },
      { name: "深圳", select: false },
      { name: "廣州", select: false },
    ],
    screenBy:[
      { title: "商家服務", select: false},
      { title: "優惠活動", select: false }
    ],

 

在頁面中通過循環渲染展示到頁面中

<view class="collection-wrap">
  <!-- 排序 -->
  <view class="{{isScrt || isAdress || isScreen ? 'content' : ''}}">
    <view class="content-wrap">
      <!-- 導航 -->
      <view class="wrap-list">
          <view class="filter-wrap" data-index="{{0}}" bindtap="filterTab">
            <text class="title">{{sortByName}}</text>
          </view>
          <view class="filter-wrap" data-index="{{1}}" bindtap="filterTab">
            <text class="title">{{sortAddressName}}</text>
          </view>
          <view class="filter-wrap" data-index="{{2}}" bindtap="filterTab">
            <text class="title">{{screenByName}}</text>
          </view>
      </view>
        {{item}}
      <!-- 綜合排序 -->
      <view class="filter-extend" wx:if="{{isScrt}}">
        <view class="list-item">
          <block wx:for="{{sortBy}}" wx:key="index">
            <view class="item" data-item="{{item}}" data-index="{{index}}" bindtap="selectSort">
              <text class="{{currentScrt===index ? 'selectName' : 'name'}}">{{item.name}}</text>
            </view>
          </block>
        </view>
      </view>

      <!-- 全國 -->
      <view class="filter-extend" wx:if="{{isAdress}}">
        <view class="list-item">
          <block wx:for="{{sortAddress}}" wx:key="index">
            <view class="item">
              <text class="{{currentScrt===index ? 'selectName' : 'name'}}">{{item.name}}</text>
            </view>
          </block>
        </view>
      </view>

      <!-- 篩選 -->
      <view class="filter-extend" wx:if="{{isScreen}}">
        <view class="list-item">
          <block wx:for="{{screenBy}}" wx:key="index">
            <view class="item">
              <text class="name">{{item.title}}</text>
            </view>
          </block>
        </view>
      </view>

    </view>
  </view>
</view>

點擊導航的時候，顯示背景色灰色。 判斷這個三個只要有一個為真就顯示，這三個分別對應的三個字段名的

 

點擊切換對應的給沒有綁定一個index索引，點擊對應的索引進行切換，默認都讓隱藏，

isScrt:false,//綜合排序
    isAdress:false,//全國
    isScreen:false,//篩選

通過綁定索引找對對應的位置

在方法中使用

filterTab(e){
    const _this = this;
    let index = e.currentTarget.dataset.index;

    switch(index) {
      case 0:
        // 綜合排序
        _this.setData({
          isScrt:true,
          isAdress: false,
          isScreen: false
        })
        break;
      case 1:
        // 全國
        _this.setData({
          isScrt: false,
          isAdress: true,
          isScreen: false
        })
        break;
      case 2:
        // 全國
        _this.setData({
          isScrt: false,
          isAdress: false,
          isScreen: true
        })
        break;
    }
  },

如果實現點擊誰切換樣式，在data定義一個字段

currentScrt: 0,

在你循環遍歷的時候綁定class，對應的判斷currentScrtst是否和index相等，如果相等顯示selectNanme樣式否則顯示name樣式

先寫個頁面樣式效果，等下次和后端對接好之后，會接着更新怎么聯調數據，

.collection-wrap {
  width: 100%;
  height: 100%;
}
.content-wrap {
  width: 100%;
  height: 86rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
  background: #fff;
}
.content{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 3;
}
.wrap-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

.content-wrap .filter-wrap {
  padding: 0 20rpx;
  height: 100%;
}

.content-wrap .filter-wrap .title {
  font-size: 28rpx;
  color: #505050;
  line-height: 86rpx;
}
/* 下拉列表 */
.filter-extend{
  position: absolute;
  top: 86rpx;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 4;
}
.filter-extend .list-item{
  padding: 20rpx;
}
.filter-extend .list-item .item .name{
  color: #505050;
  font-size: 28rpx;
  padding-bottom: 20rpx;
}
.selectName{
  color: #00baad;
  font-size: 28rpx;
}