微信小程序下拉框实现

• 小程序中是没有直接的下拉框标签可以使用的,所以下拉框需要手动写,或者使用框架
• 因为考虑到下拉框展开的时候,可能需要遮挡住其余的样式,这里就用的cover-view标签.(不考虑遮挡的可以换成普通的view标签)

 

1:视图添加以下代码：

    <view class="search-bar">
        <view class="condition" bindtap="showCondition">
            <view class="select-condition">{{choosedCondition.title}}</view>
            <view class="trigger {{ conditionVisible ? \'reverse\' : \'\'}}"></view>
            <cover-view class="option-list" style="height: {{conditionVisible ? \'300rpx\': \'0\'}}">
                <cover-view bindtap="onChnageCondition" data-id="{{item.id}}" class="list-item" wx:for="{{conditionList}}" wx:key="index" wx:for-index="index">
                    <cover-view class="title">{{item.title}}</cover-view>
                    <cover-view class="title" wx:if="{{item.select}}">√</cover-view>
                </cover-view>
            </cover-view>
        </view>
    </view>

2：wxss

/* 下拉框 */
  /* search */
.search-bar {
  width: 100%;
  height: 84rpx;
  background: #fff;
  /* border-top: 1rpx solid #f6f6f6; */
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  /* border: 1rpx solid red; */
}

.search-bar .condition {
  width: 100%;
  height: 64rpx;
  /* border-radius: 30rpx; */
  background: #F4F4F4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20rpx;
  position: relative;
}

.search-bar .condition .option-list {
  position: absolute;
  z-index: 100;
  width: 100%;
  left: 0;
  top: 60rpx;
  box-sizing: border-box;
  background: #f4f4f4;
  padding: 0rpx 20rpx;
  margin-top: 4rpx;
  border-radius: 6rpx;
}

.option-list .list-item {
  color: #BABABA;
  font-size: 26rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-bar .condition .select-condition {
  color: #BABABA;
  font-size: 26rpx;
}

.search-bar .condition .trigger {
  width: 0;
  height: 0;
  border: 12rpx solid transparent;
  border-top: 15rpx solid #c2c2c2;
  position: relative;
  top: 8rpx;
  transform: rotate(0deg);
  transform-origin: center 7rpx;
  transition: transform 0.4s;
}

.search-bar .condition .trigger.reverse {
  transform: rotate(180deg);
  transform-origin: center 7rpx;
  transition: transform 0.4s;
}

/* 下拉框结束 */

3:wxjs

data: {
        tabType: \'tab1\',
        key: \'tab1\',
        conditionList: [{
                title: \'选项1\',
                id: \'1\',
                select: true
            },
            {
                title: \'选项2\',
                id: \'2\',
                select: false
            },
            {
                title: \'选项3\',
                id: \'3\',
                select: false
            },
            {
                title: \'选项4\',
                id: \'4\',
                select: false
            },
            {
                title: \'选项5\',
                id: \'5\',
                select: false
            }
        ],
        choosedCondition: {
            title: \'选项1\',
            id: \'1\'
        },
        conditionVisible: false,


    
    },

    showCondition() {
        this.setData({
            conditionVisible: !this.data.conditionVisible
        })
    },
    // 改变查询项
    onChnageCondition(e) {
        const list = this.data.conditionList
        list.forEach(item => {
            if (item.id === e.currentTarget.dataset.id) {
                item.select = true
                this.setData({
                    \'choosedCondition.title\': item.title,
                    \'choosedCondition.id\': item.id
                })
            } else {
                item.select = false
            }
        })
        this.setData({
            conditionList: list
        })
    },

6：效果图