微信小程序?qū)崿F(xiàn)單列下拉菜單效果

發(fā)布時(shí)間：2020-09-16 17:30:10 來(lái)源：腳本之家閱讀：161 作者：胡曉天o0 欄目：web開(kāi)發(fā)

接下來(lái)我想做的是一個(gè)下拉菜單用來(lái)分類的，但是在網(wǎng)上搜了一下，基本上全都是比較復(fù)雜的分類菜單，最簡(jiǎn)單的也是分三列的下拉菜單，但是并不想要這么復(fù)雜的，最后找了一個(gè)三列的，改成了單列。也把代碼盡可能的簡(jiǎn)單化了。

實(shí)現(xiàn)的效果圖：

合并狀態(tài)：

首先下面是目錄結(jié)構(gòu)：

微信小程序?qū)崿F(xiàn)單列下拉菜單效果

下面是實(shí)現(xiàn)的具體代碼：

.wxml

<!--選擇框-->
<view class="product-list">
 <!--條件選擇-->
 <view class="choice-bar">
  <view bindtap="opens" data-item="1" class="chioce-item" hover-class="click-once-opaque">{{start}}
   <image class="icon-chioce" src="{{!isstart?openimg: offimg}}"></image>
  </view>
  <view class="sorting-list{{!isstart?' chioce-list-hide':' chioce-list-show'}}">
   <view wx:for="{{slist}}" catchtap="onclicks1" data-index="{{index}}" class="sorting-item" hover-class="click-once" wx:key="userInfoListId" >{{item.name}}</view>
  </view>
 </view>
</view>

.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: "目的地"
  })
 }
})

以上所述是小編給大家介紹的微信小程序單列下拉菜單詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

微信小程序?qū)崿F(xiàn)單列下拉菜單效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽