微信小程序实现select二级下拉

本文实例为大家分享了微信小程序实现select二级下拉的具体代码，供大家参考，具体内容如下

xiala.wxml

<!-- 列表选择 -->
<view class="list" hover-class="none" hover-stop-propagation="false">
    <text class="listText dd">3.请选择门店</text>
    <view class="box" hover-class="none" hover-stop-propagation="false">
        <view class='select_box'>
            <view class='select' catchtap='dianTap'>
                <input type="number" class='select_text' disabled="true" adjust-position="flase"
                    value="{{dian[index]}}" name="lie" />
                <image class='select_img {{dianShow&&"select_img_rotate"}}' src='/pages/image/b2.png'
                    background-size="contain"></image>
            </view>
            <view class="option_bbox" hover-class="none" hover-stop-propagation="false">
               <view class='option_box' style='height:{{dianShow?(area.length>5?325:dian.length*70):0}}rpx;'>
                <text class='option' wx:for='{{area}}' wx:key='this' data-index='{{index}}' data-aid='{{item.id}}'  catchtap='areaId'>{{item.name}}</text>
            </view>
            <view class='option_box' style='height:{{dianShow?(dian.length>5?325:dian.length*70):0}}rpx;'>
                <text class='option' wx:for='{{dian}}' wx:key='this' data-index='{{dian}}' catchtap='optionTap'>{{item}}</text>
            </view> 
            </view>
            
        </view>
    </view>

</view>

js页面

// pages/xiala/xiala.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    liebiao:[],
    price:[],
    index:0,
    area:[],
    areaId:'',
    dian:[]
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   var that = this;
   that.area();
   
  },
// 获取区域
area(){
  var that = this;
    wx.request({
      url: 'xxxxxx',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
        let area = res.data.data;
        let obMut = [];
        let areaId;
        for(var i=0; i<area.length;i++){
          areaId = area[0].id;
          obMut.push({id:area[i].id,name:area[i].name});
          }
          
          that.setData({
            areaId:areaId,
            area:obMut
           })
          //  console.log(that.data.areaId)
          that.dian();
      }
      
    })
    
},
// 点击改变区id
areaId(e){
  var that = this;
  that.setData({
    areaId: e.currentTarget.dataset.aid,
  })
  that.dian();
},
// 获取店
dian:function(){
  let that = this;
  let idx =that.data.areaId;
  let area = that.data.area;
  console.log(area)
  area.forEach((item, index) => {
    if (idx === item.id) {
      item.status = true
      wx.request({
        url: 'xxxxxxx',
        dataType: 'json',
        method: 'POST',
        header: {
         'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          aid: item.id
        },
        success(res) {
          // console.log(res)
          let fmutA = that.data.fmutA;
          if (res.data.status === 1) {
          console.log(res.data.shop)
          
          let dian = res.data.shop;
          let fDian = [];
          
          for(var i=0; i<dian.length;i++){
            fDian[i] = dian[i].name;
            }
          console.log(fDian)
          that.setData({
            dian: fDian,
           })
        }
          
  
        }
      })
  }else{
    item.status = false
  }
  })
},
  // 点击下拉显示框
  dianTap() {
    this.setData({
      dianShow: !this.data.dianShow
    });
  },
  // 点击下拉列表
  optionTap(e) {
    let Index = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    this.setData({
      index: Index,
      dianShow: !this.data.dianShow
    });
  }
})

wxss页面

/* 列表 */
/* pages/map/map.wxss */
.select_box{
  width: 63%;
  height:70%;
  border-radius: 14rpx;
  position: relative;
}
.select_box .select{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
}
.select_box .select .select_text{
  color: #777777;
  line-height: 28rpx;
  flex: 1;
}
.select_box .select .select_img{
  width: 20rpx;
  height: 20rpx;
  display: block;
  transition:transform 0.3s;
  position: absolute;
  right: 25rpx;
}
.select_box .select .select_img_rotate{
  transform:rotate(180deg); 
}
.select_box .option_box{
position: absolute;
top: calc(100% - 1px);
width: 100%;
box-sizing: border-box;
height: 0;
overflow-y: auto;
background: #fff;
transition: height 0.3s;
border: 1px solid #efefef;
border-right: 1px solid #efefef;
background: #fcfcfc;
}
.select_box .option_box .option{
  display: block;
  line-height: 38rpx; 
  font-size: 9pt;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
}
.option_bbox{
    display: flex;
    justify-content: row;
}
.select_box .option_box {
    position: relative;
}

界面比较原始，建议自行美化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。