本文实例为大家分享了微信小程序实现select二级下拉的具体代码,供大家参考,具体内容如下
xiala.wxml
3.请选择门店 {{item.name}} {{item}}
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{ 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
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; }
界面比较原始,建议自行美化
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。