微信小程序实现下拉筛选

不多说直接上代码

1、WXML代码：

<view class="container">

  <view class="goods-type">
    <view class="select-content">
      <view class="select-border" bindtap="showSelectBox">
          <text>{{chooseItem}}</text>
          <text class="arrow"></text>
      </view>
      <view class="select-box" wx:if="{{selectBox}}">
          <view class="select-item" bindtap="chooseSelectItem" data-name="分类一">分类一</view>
          <view class="select-item" bindtap="chooseSelectItem" data-name="分类二">分类二</view>
          <view class="select-item" bindtap="chooseSelectItem" data-name="分类三">分类三</view>
      </view>
    </view>
  </view>
  
</view>

2、 WXSS代码：

.container {
  width: 100%;
  min-height: 100vh;
  background-color: rgba(238, 239, 241, 1)
}

.goods-type {
  height: 80rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.select-content {
  position: relative
}

.select-border {
  width: calc(50% - 20rpx);
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f55095;
  padding: 0 10rpx
}

.select-border .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.7px 5px 0 5px;
  border-color: #f55095 transparent transparent transparent;
}

.select-box {
  background-color: #fff;
  padding: 0 10rpx;
  width: calc(50% - 20rpx);
  position: absolute;
  z-index: 99;
  overflow: hidden;
  border: 1rpx solid #f55095;
  border-top: none;
}

.select-item {
  height: 60rpx;
  line-height: 60rpx;
}

.select-item:last-child {
  border: none;
}

3、JS代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {

    selectBox: false,
    chooseItem: '全部分类'

  },

  //选择下拉选项
  chooseSelectItem: function(e){
    let name = e.currentTarget.dataset.name;
    this.setData({
      selectBox: false,
      chooseItem: name
    })
  },

  //显示隐藏下拉列表
  showSelectBox: function(){
    this.setData({
      selectBox: !this.data.selectBox
    })
  }
})