微信小程序实现select二级下拉
更新时间:2022年7月19日 13:36 点击:1266 作者:三许
本文实例为大家分享了微信小程序实现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; }
界面比较原始,建议自行美化
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/qq_30846941/article/details/105534920
相关文章
- 这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-01
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 1.在没有设置默认值的情况下: 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果:...2014-05-31
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
MySQL中SELECT+UPDATE处理并发更新问题解决方案分享
问题背景: 假设MySQL数据库有一张会员表vip_member(InnoDB表),结构如下: 当一个会员想续买会员(只能续买1个月、3个月或6个月)时,必须满足以下业务要求: •如果end_at早于当前时间,则设置start_at为当前时间,end_at为当前时...2014-05-31- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-09-01
- 这篇文章主要介绍javascript获取select标签选中的值方法,比较实用,需要的朋友可以参考下。...2016-06-12
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19