小程序下拉框与选择器

最新推荐文章于 2025-07-14 13:31:24 发布

扛刀仔

最新推荐文章于 2025-07-14 13:31:24 发布

阅读量1.5w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/weixin_44540005/article/details/91360600

小程序专栏收录该内容

9 篇文章

订阅专栏

本文讨论了在小程序中如何实现下拉框功能，由于小程序没有内置的下拉框标签，作者建议使用选择器组件来替代，并提供了相关的WXML、JS和WXSS代码示例。此外，还提到了选择器的索引问题和事件绑定注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不得不吐槽下小程序下拉框问题，小程序是没有对应的下拉框标签的，如果要用到：要么自己手写，要么就用选择器代替实现。

正题(复制代码就行了)

.wxml

  <view class='list-msg'>
    <view class='list-msg2' bindtap='bindShowMsg'>
        <text>{{tihuoWay}}</text>
        <!-- <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image> -->
    </view>
    <cover-view class="select_box" wx:if="{{select}}">
        <cover-view class="select_one" bindtap="mySelect" data-name="玉林">玉林</cover-view>
        <cover-view class="select_one" bindtap="mySelect" data-name="上海">上海</cover-view>
     
    </cover-view>
  </view>

.js

//下拉框
  ,bindShowMsg() {
    this.setData({
      select: !this.data.select
    })
  },
  mySelect(e) {
    var name = e.currentTarget.dataset.name
    this.setData({
      tihuoWay: name,
      select: false
    })
  }

.wxss

.list-msg {
    margin: 0 10rpx;
    background-color: rgb(124, 122, 122);
     position: relative; 
    width: 16%;
    
}
 
.list-msg1 {
    /* height: 60rpx; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 
.list-msg .list-msg2 {
    /* height: 60rpx; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 0 10rpx;
}
 
.select_box {
    background-color: #eee;
    padding: 0 10rpx;
    width: 82%;
    position: absolute;
    /* top: 130rpx; */
    z-index: 1;
    overflow: hidden;
    animation: myfirst 0.5s;
}
 
@keyframes myfirst {
    from {
        height: 0rpx;
    }
 
    to {
        height: 210rpx;/* 设置显示的长度  和效果配合才有效  这个不写也行 */
    }
}
 
.select_one {
    height: 60rpx;
    line-height: 60rpx;
    border-bottom: 1px solid #ccc;
}

选择器（我就不写了别人介绍的比较全）

https://blog.youkuaiyun.com/qq_35713752/article/details/80295372

注意：选器索引问题即绑 id name 两个参数

最好在 bindchange 改变事件改值