收藏
回答

关于下拉框的问题,求大佬指教

首先声明我不会写下拉框,这是在网上找的demo

如图红色框框标出来的地方,鼠标根本就点不到,一点就会到输入框里面

下面是wxss和wxml

wxss:

.select_box {

background: #fff;

width: 71%;

margin: 10rpx;

position: relative;

float: right;

}


.select {

box-sizing: border-box;

width: 100%;

height: 70rpx;

border: 1px solid #efefef;

border-radius: 8rpx;

display: flex;

align-items: center;

padding: 0 20rpx;

}


.select_text {

font-size: 30rpx;

flex: 1;

}


.select_img {

width: 30rpx;

height: 20rpx;

display: block;

transition: transform 0.3s;

}


.select_img_rotate {

transform: rotate(180deg);

}


.option_box {

position: absolute;

top: 70rpx;

width: 100%;

border: 1px solid #efefef;

box-sizing: border-box;

height: 0;

overflow-y: auto;

border-top: 0;

background: #fff;

transition: height 0.3s;

}


.option {

display: block;

line-height: 40rpx;

font-size: 30rpx;

border-bottom: 1px solid #efefef;

padding: 10rpx;

}

wxml:

<view class='select_box'>

<view class='select' catchtap='selectTap'>

<text class='select_text'>{{selectData[index]}}</text>

<image class='select_img {{show&&"select_img_rotate"}}' src='../images/down.png'></image>

</view>

<view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>

<text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>

</view>

</view>


回答关注问题邀请回答
收藏

2 个回答

  • 哄哄
    哄哄
    2019-01-09

    textarea 是原生组件,无法被覆盖

    原生组件:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

    2019-01-09
    有用
    回复 1
    • 夏目_侯雨伯
      夏目_侯雨伯
      2019-01-09

      我设置了z-index:10,就可以选择了,这是为什么本来是选择不到5的,选择可以了

      2019-01-09
      回复
  • 夏目_侯雨伯
    夏目_侯雨伯
    2019-01-09

    下拉框的样式我根据情况改了一下,但是这个选取不了的问题就一直不知道是哪里的问题,不知道该怎么解决

    2019-01-09
    有用
    回复 2
    • 哄哄
      哄哄
      2019-01-09

      建议你提供代码片段。

      2019-01-09
      回复
    • 夏目_侯雨伯
      夏目_侯雨伯
      2019-01-09回复哄哄

      已经解决了,不过还是很感谢你能看我的帖子!

      2019-01-09
      回复
登录 后发表内容