微信小程序之下拉框组件的开发

熊孩子依旧调皮
507 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

前言

实不相瞒小程序又有新的需求，实现一个下拉框组件用于搜索后的分类查询，相信大家也遇到类似的开发要求，该功能可以实现类似于各大电商平台搜索后的精准查询，上图！ image.png

组件页面

  • 各个分类查询的标题实现 一般情况下是用循环来渲染，因为不确定有多少个分类，如果是很多个的话需要加上右侧滑动，并且间距要给够
  <view class="tabs">
    <view bindtap="setTab" data-type="package" wx:for-item='item'>
      <view style="{{init ? 'color:#2D59E6':''}}">{{item.name}}</view>
      <image src="{{item.url}}"></image>
    </view>
  </view>

在内分别由该下拉的名称和图标，点击后要展开下拉的选择详情

  • 下拉详情 下拉详情是点击某个查询标题后进行展开，点击test1，再次点击要关闭，如果点击test2后是不关闭而且展开test2的详情菜单
  1. 最外层view层开关控制
<view class="selectTab" style="{{isTab ? 'display:block':'display:none'}}">
  </view>

根据isTab来判断是否开和关

  1. tab菜单 在tabdetail内我们设置了菜单详情的名称和类型以免重复，除外还设置了每个大菜单的类型（好区分）
    <view class="tabText">
      <block wx:for="{{tabDetail}}" wx:for-item="item" wx:for-index="index" wx:key='index'>
        <view bindtap="seleteTab" data-item="{{item}}" data-type="{{item.type}}"
          class="{{item.isSelete ? 'isActive' :''}}">{{item.name}}</view>
      </block>
    </view>
  1. 点击tab菜单后做了什么 点击后我们首先要判断它是否是第一次点击还是之前展开后又重复点击还是展开后点击了又点击了其他的tab按钮
  setTab(e){
    const type = e.currentTarget.dataset.type;
    if(this.data.seleteTabType == type && this.data.isTab == true){
      this.setData({
        isTab:false
      })
      return ;
    }
}

判断如果seleteTabType等于当前点击的类型并且当前菜单是开启状态那就是重复点击所以要进行关闭，如果不是则根据它的类型进行展开和切换菜单

tabDetail.map(itemTabType=>{
    if(itemTabType.type == type){
        seleteTabType = type
      return {...itemTabType,isSelete:true}
    }else{
    seleteTabType = type
      return {...itemTabType,isSelete:false}
    }
  })
  this.setData({
      seleteTabType,tabdetail
  })

isSelete是当前选择的项，咱们的逻辑是点击名字后进行变色，所以需要它控制，最后对seleteTabType当前选择的类型进行赋值

  1. 确认按钮 思路：点击确认后应该请求已经选择符合当前条件的数据，需要循环判断那个是已经点击过的，如果是点击过的isSelete会为true，请求并传值
tabDetail.map(item=>{
  if(item.isSelete){
    seleteType = item.type
  }
})
this.getList(seleteType)

最后

重置按钮没有详细写，因为逻辑很简单把详情关闭，选择数据清空并重新请求，即可拿到新的数据。 你学会了吗！！

avatar
文章
阅读
粉丝