微信小程序下拉框實現

• 小程序中是沒有直接的下拉框標簽可以使用的,所以下拉框需要手動寫,或者使用框架
• 因為考慮到下拉框展開的時候,可能需要遮擋住其余的樣式,這里就用的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：效果圖