前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序实现综合排序页面布局

小程序实现综合排序页面布局

作者头像
小周sir
发布2019-09-23 15:54:35
6960
发布2019-09-23 15:54:35
举报
文章被收录于专栏:前端技术开发

在一些场景中,常常会遇到过一个功能,点击什么筛选的,综合排序刷新接口数据,就像下面这样的效果。小程序只是先把页面布局好,数据字段定义好了,就差和后端沟通,按照我这种数据结构写接口了,第一次写小程序项目,开始慢慢踩坑,把遇到的问题都慢慢总结一下,

在小程序js文件中,在data定义一下综合排序,全国,筛选字段,然后通过for循环遍历渲染到页面

代码语言:javascript
复制
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 }
    ],

在页面中通过循环渲染展示到页面中

代码语言:javascript
复制
<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索引,点击对应的索引进行切换,默认都让隐藏,

代码语言:javascript
复制
isScrt:false,//综合排序
    isAdress:false,//全国
    isScreen:false,//筛选

通过绑定索引找对对应的位置

在方法中使用

代码语言:javascript
复制
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定义一个字段

代码语言:javascript
复制
currentScrt: 0,

在你循环遍历的时候绑定class,对应的判断currentScrtst是否和index相等,如果相等显示selectNanme样式否则显示name样式

先写个页面样式效果,等下次和后端对接好之后,会接着更新怎么联调数据,

代码语言:javascript
复制
.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;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档