您现在的位置是:网站首页> 编程资料编程资料

微信小程序实现select二级下拉_javascript技巧_

2023-05-24 363人已围观

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

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

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

-六神源码网