您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现select二级下拉_javascript技巧_
2023-05-24
366人已围观
简介 微信小程序实现select二级下拉_javascript技巧_
本文实例为大家分享了微信小程序实现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; }界面比较原始,建议自行美化
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- JavaScript详解使用Promise处理回调地狱与async await修饰符_javascript技巧_
- 一定有你会用到的JavaScript一行代码实用技巧总结_javascript技巧_
- jQuery事件注册的实现示范_jquery_
- 函数式组件劫持替代json封装element表格_vue.js_
- JavaScript同步与异步任务问题详解_javascript技巧_
- JavaScript前端实用的工具函数封装_JavaScript_
- vue实现虚拟列表组件解决长列表性能问题_vue.js_
- Vue项目打包并部署nginx服务器的详细步骤_vue.js_
- 微信小程序实现性别单选效果_javascript技巧_
- JavaScript复原何同学B站头图细节示例详解_JavaScript_
