微信小程序下拉选项框

悠悠 2022-04-23 11:40 309阅读 0赞

效果图  
![在这里插入图片描述][20190218115118420.png]  
![在这里插入图片描述][20190218115130716.png]  
test.js

/**
       * 页面的初始数据
       */
      data: {
        shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示
        selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据
        indexs: 0, //选择的下拉列 表下标,
      },
    
      // 点击下拉显示框
      selectTaps() {
        this.setData({
          shows: !this.data.shows,
        });
      },
      // 点击下拉列表
      optionTaps(e) {
        let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
        console.log(Indexs)
        this.setData({
          indexs: Indexs,
          shows: !this.data.shows
        });
    
      },

test.wxml

<view class='fenlei'>
      <text>地址</text>
      
        <view class='select_box'>
          <view class='select' catchtap='selectTaps'>
            <text class='select_text'>{
       {selectDatas[indexs]}}</text>
            
            <image class='select_img {
       {shows&&"select_img_rotate"}}' src='../../images/sanjiao.png'></image>
          </view>
          <view class='option_box' style='height:{
       {shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'>
            <text class='option' style='{
       {indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{
       {selectDatas}}' wx:key='this' data-index='{
       {index}}' catchtap='optionTaps'>{
       {item}}</text>
          </view>
        </view>
    </view>

test.wxss

/* fenlei */
    .fenlei{
      margin: 0 25rpx;
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 1rpx solid #e6e6e6;
      display: flex;
      align-items: center;
    }
    .fenlei text{
      font-size: 30rpx;
      color: #999999;
      margin-left: 15rpx;
    }
    /* 下拉框 */
    .select_box {
      background: #fff;
      width: 620rpx;
      /* margin: 0 auto; */
      height: 90rpx;
      line-height: 90rpx;
      text-align: left;
      position: relative;
    }
    
    .select {
      box-sizing: border-box;
      width: 100%;
      height: 86rpx;
      /* border: 1px solid #efefef; */
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }
    
    .select_text {
      font-size: 28rpx;
      flex: 1;
      color: rgb(102, 102, 102);
      line-height: 86rpx;
      height: 86rpx;
    }
    
    .select_img {
      width: 40rpx;
      height: 40rpx;
      display: block;
      transition: transform 0.3s;
    }
    
    .select_img_rotate {
      transform: rotate(180deg);
    }
    
    .option_box {
      position: absolute;
      top: 86rpx;
      width: 100%;
      /* border: 1px solid #efefef; */
      box-sizing: border-box;
      height: 0;
      overflow-y: auto;
      border-top: 0;
      background: #fff;
      transition: height 0.3s;
      z-index: 100;
    }
    
    .option {
      display: block;
      line-height: 40rpx;
      font-size: 28rpx;
      border-bottom: 1px solid #efefef;
      padding: 10rpx;
      color: rgb(102, 102, 102);
    }

[20190218115118420.png]: /images/20220319/98f04dcfaefe4b919713078fa87a6784.png
[20190218115130716.png]: /images/20220319/8fc68551b5e94e309ed5e74aa1038c3f.png