E企盈营销工具技术服务商 热线:4006-838-530

微信小程序下拉选择框

E企盈直播平台营销卖货系统

一般来说的话,总有点需要下拉并且能够搜索选择的需求。首先wxml!– 下拉菜单   —    view class=’menu-po’      !– 请选择 —      view class=’menu’        view class=’menu-list’          view class=”{{item.key==menuNums&&openPicker?’menu-nav2′:’menu-nav’}}” wx:for=”{{ msgList }}” wx:for-index=”idx” data-key='{{item.key}}’ wx:key=”key” data-hi=”{{ idx }}” data-name='{{item.name}}’ bindtap=”menuClick”            text class=’menu-text'{{ item.name }}/text            image class=’menu-image’ src=’/pages/img/pull.png’/image          /view        /view      /view      !– 列表栏 —      view class=’menu-if’        !– 区域 —        view class=”meun-txt over-auto” hidden='{{ meunShow[0].isShows ? true : false }}’          scroll-view scroll-y=”true” style=”height: 446rpx”            text wx:for=”{{ sousuoList }}” data-id=”{{item.id}}” class=’meun-city-txt meun-city-txt-price’ bindtap=’souSearch’ data-name='{{item.name}}'{{ item.name }}/text          /scroll-view        /view      /view    /view其次是wxss.menu-po {  position: relative;  left: 0;  top: 0;  right: 0;  bottom: 0;  width: 25%;  margin-left: 5%;  display: inline-block;  margin-top: 10px;  margin-bottom: 10px;}.menu-list {  display: flex;  justify-content: space-between;}.menu-nav {  display: flex;  align-items: center;  justify-content: center;}.menu-nav2 {  display: flex;  align-items: center;  justify-content: center;}.menu-nav2 image {  width: 24rpx;  height: 15rpx;}.menu-nav2 text {  font-size: 14px;}.menu-nav image {  width: 24rpx;  height: 15rpx;}.menu-nav text {  color: #696969;  font-size: 14px;}.shadow {  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.3);  z-index: 1;  position: absolute;  top: 210rpx;}.menu-if {  background-color: #fff;  box-sizing: border-box;  position: absolute;  z-index: 9;  margin-left: -15px;  width: 100%;}.swiper-item {  background: #fff;  width: 100%;  height: 600rpx;  display: none;  position: absolute;  top: 100rpx;  z-index: 333333;  left: 0;  animation: displays 1s;}.meun-txt {  height: auto;  color: #696969;}.menu-text-list {  position: relative;  left: 0;  top: 0;  right: 0;  bottom: 0;}.menu-text-list-left {  width: 100%;  background-color: #fff;  box-sizing: border-box;  padding-left: 35rpx;}/* text样式 */.meun-city-txt {  display: block;  border-bottom: 1rpx solid #e9e9e9;  width: 100%;  padding: 25rpx 0;  font-size: 14px;}.meun-city-txt-price {  display: flex;  justify-content: center;}.menu-text-list-rig {  width: 50%;  position: absolute;  top: 0;  right: 0;  background-color: #f9f9f9;  z-index: 10;  box-sizing: border-box;  padding-left: 35rpx;}最后是js文件Page({  /**   * 页面的初始数据   */  data: {    msgList: [{      key: 1,      name: ‘请选择’    }],    // 判断导航栏列表是否显示    meunShow: [{      isShows: true    }],    sousuoList: [{      id: 1,      name: ‘新房’    }, {      id: 2,      name: ‘二手房’    }, {      id: 3,      name: ‘写字楼’    }, {      id: 4,      name: ‘商铺’    }, {      id: 5,      name: ‘出租’    }],  },  souSearch: function (e) {    var that = this;    var openPicker = this.data.openPicker;    var house_name = e.target.dataset.name;    var msgList = that.data.msgList;    this.setData({      openPicker: !openPicker,    })    for (var i = 0; i msgList.length; i++) {      var keys = msgList[i].key;      if (keys == 1) {        msgList[i].name = house_name;        that.setData({          msgList: msgList,          house_name: house_name        })      }    }    var menuNum = that.data.menuNum;    var meunShow = this.data.meunShow;    var menuSrc = “meunShow[” + menuNum + “].isShows”;    // console.log(‘menuNum:’ + menuNum);    for (var n = 0; n meunShow.length; n++) {      // 拼接 ,使我们可以获取到menuShow里面每一个isSHows      var menuSrcs = meunShow[n].isShows;      // console.log(‘menuSrcs:’ + menuSrcs);      // 解决重复点击不能隐藏的问题      if (n != menuNum) {        this.setData({          menuSrcs: true        });      };    };    // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏    this.setData({      [menuSrc]: !this.data.meunShow[menuNum].isShows    });  },  menuClick: function (e) {    // 获取通过wxml  data-hi=”{{ idx }}” 传过来的索引    var that = this;    var menuNum = e.currentTarget.dataset.hi;    that.setData({      menuNum: menuNum    })    var name = e.currentTarget.dataset.name;    if (name == that.data.name) {      // console.log(‘==’);      that.setData({        openPicker: !this.data.openPicker,      })    } else {      // console.log(‘!=’);      that.setData({        openPicker: true,      })    }    that.setData({      name: name    })    // console.log(name + ‘,’ + menuNum);    // 拼接 ,使我们可以获取到menuShow里面每一个isSHows    var menuSrc = “meunShow[” + menuNum + “].isShows”;    // console.log(‘picker:’ + this.data.openPicker);    this.setData({      needAnimation: true,      menuNums: menuNum + 1    });    // 循环data中设置的meunShow    for (var n = 0; n this.data.meunShow.length; n++) {      // 拼接 ,使我们可以获取到menuShow里面每一个isSHows      var menuSrcs = “meunShow[” + n + “].isShows”;      // 解决重复点击不能隐藏的问题      if (n != menuNum) {        // 初始化,每次点击时先全部隐藏,但是重复点击不会隐藏        this.setData({          [menuSrcs]: true        });      };    };    // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏    this.setData({      [menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows    });  },  })这就是下拉选择框的全部代码了。

E企盈系统专业开发:直播系统,直播平台系统源码,小程序,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530
赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序下拉选择框
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏