本文实例为大家分享了微信小程序实现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='https://www.atool.online/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; }
界面比较原始,建议自行美化
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。