效果截图：

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>

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;}

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
    })
  }
})