微信小程序实现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;
}

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

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

查看更多关于微信小程序实现select二级下拉的详细内容...