微信小程序实现单列下拉菜单效果

接下来我想做的是一个下拉菜单用来分类的，但是在网上搜了一下，基本上全都是比较复杂的分类菜单，最简单的也是分三列的下拉菜单，但是并不想要这么复杂的，最后找了一个三列的，改成了单列。也把代码尽可能的简单化了。

五华网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

实现的效果图：

合并状态：

微信小程序实现单列下拉菜单效果

首先下面是目录结构：

微信小程序实现单列下拉菜单效果

下面是实现的具体代码：

.wxml



 
 
  {{start}}
   
  
  
   {{item.name}}

.wxss

.product-list {
 width: 100%;
 box-sizing: border-box;
 
}
 
 
.choice-bar {
 position: fixed;
 display: flex;
 width: 100%;
 font-size: 14px;
 background-color: #fff;
 /**z-index: 0;**/
}
.chioce-item {
 background-color: #fff;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 20rpx;
 width: 100%;
 height: 80rpx;
 border-top: 1rpx solid #ddd;
 border-bottom: 1rpx solid #ddd;
 border-left: 1rpx solid #ddd;
 /*border-right: 1rpx solid #ddd;*/
}
 
.icon-chioce {
 height: 30rpx;
 width: 30rpx;
}
.district-list,.sorting-list,.filter-list {
 margin-top: 2rpx;
 position: absolute;
 top: 80rpx;
 left: 0;
 width: 100%;
 background-color: #fff;
 z-index: -1;
 font-size: 14px;
 border-bottom: 1rpx solid #ddd;
}
.chioce-list-hide {
 display: none !important;
}
.chioce-list-show {
 /**top: 80rpx;**/
 animation: slide 500ms;
}
 
.sorting-item {
 height: 80rpx;
 line-height: 80rpx;
 padding: 0 40rpx;
 border-bottom: 1rpx solid #ddd;
}

.js

Page({
 data: {
  start: "起始地",
  slist: [
   { id: 1, name: "第一类" },
   { id: 1, name: "第二类" },
   { id: 1, name: "第三类" },
   { id: 1, name: "第四类" },
   { id: 1, name: "第五类" },
  ],
  isstart: false,
  openimg: "/images/list/list.png",
  offimg: "/images/list/list1.png"
 },
 opens: function (e) {
  switch (e.currentTarget.dataset.item) {
   case "1":
    if (this.data.isstart) {
     this.setData({
      isstart: false,
     });
    }
    else {
     this.setData({
      isstart: true,
     });
    }
    break;
  }
 },
 onclicks1: function (e) {
  var index = e.currentTarget.dataset.index;
  let name = this.data.slist[index].name;
  this.setData({
   isstart: false,
   isfinish: false,
   isdates: false,
   start: this.data.slist[index].name,
   finish: "目的地"
  })
 }
})

以上所述是小编给大家介绍的微信小程序单列下拉菜单详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！

网页名称：微信小程序实现单列下拉菜单效果
网站路径：http://www.wjwzjz.com/article/jpipei.html

新网创想网站建设，新征程启航

微信小程序实现单列下拉菜单效果

其他资讯