创建小程序下拉菜单

最新推荐文章于 2021-09-23 16:00:07 发布

原创最新推荐文章于 2021-09-23 16:00:07 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在小程序中创建下拉菜单的方法，利用CSS旋转功能实现箭头图标，并通过:hover伪类显示隐藏菜单。提供了详细的wxml、js和wxss代码示例，包括菜单按钮、列表项及响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建小程序下拉菜单
菜单的按钮箭头是利用边框线加旋转功能实。
利用css display: none;隐藏菜单，和.dropdown:hover .dropdown-content {
display: block;显示菜单详见代码
wxml内容

 
    <!--下拉菜单  -->
    <view class='weui-cell '>
      <!--下拉框  -->
      <view class="weui-cell__bd dropdown" bindtap='bindShowMsg'>
        <span class="dropbtn">分类</span>
        <span class="jiantoudown"></span>
        <!-- 下拉需要显示的列表 -->
        <view class="dropdown-content" wx:if="{{select}}">
          <block wx:for="{{infotype}}" wx:key="this" wx:for-item="item">
            <view class="dropdown-item" bindtap="mySelect" data-name="{{index}}">{{item}}</view>
          </block>
        </view>
      </view>

      <!--下拉框  -->
      <view class="weui-cell__bd dropdown" bindtap='bindShowMsg'>
        <span class="dropbtn">附近</span>
        <span class="jiantoudown"></span>
        <!-- 下拉需要显示的列表 -->
        <view class="dropdown-content" wx:if="{{select}}">
          <block wx:for="{{infotype}}" wx:key="this" wx:for-item="item">
            <view class="dropdown-item" bindtap="mySelect" data-name="{{index}}">{{item}}</view>
          </block>
        </view>
      </view>

     <!--下拉框  -->
      <view class="weui-cell__bd dropdown" bindtap='bindShowMsg'>
        <span class="dropbtn">智能排序</span>
        <span class="jiantoudown"></span>
        <!-- 下拉需要显示的列表 -->
        <view class="dropdown-content" wx:if="{{select}}">
          <block wx:for="{{infotype}}" wx:key="this" wx:for-item="item">
            <view class="dropdown-item" bindtap="mySelect" data-name="{{index}}">{{item}}</view>
          </block>
        </view>
      </view>

    </view>

js的内容

  data: {
    infotype: ["转让", "求购", "出租", "求租", "求职", "公益"],
    nearytype: ["1千米", "3千米", "5千米", "10千米", "全城", "地图点选"],
    ordertype: ["智能排序","好评优先","离我最近","佣金最高",]
  },
  mySelect(e) {
    var name = e.currentTarget.dataset.name
    this.setData({
      tihuoWay: name,
      select: false
    })
  },
  bindShowMsg() {
    this.setData({
      select: !this.data.select
    })
  },

wxss内容

/*箭头---通过角旋转得倒，*/
.jiantoudown{
  padding-right: 3px;
 }
.dropbtn:after{
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform:rotate(135deg);
  transform: rotate(135deg);
  top: -2px;
  position: relative;
  top: 50%;
  margin-top: -4px;
  right: -17rpx;
}
/*下拉菜单*/
.dropdown {  
  display: inline-block;
}

.dropdown-content {
  display: none;  /*下拉菜单先不显示*/
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100rpx;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px 16px;
}
/* 下接菜单项*/
.dropdown-item{padding: 10px 15px;}
.dropdown-item:hover { background-color: #3e8e41; }

/* 当鼠标在下拉菜单按钮上时显示菜单*/
.dropdown:hover .dropdown-content {
  display: block;
}
	/* 当鼠标在下拉菜单按钮上时按钮变色*/
.dropdown:hover .dropbtn {
    color: #3e8e41; /* 当下拉内容显示后修改下拉按钮的背景颜色*/
}