微信小程序自定义下拉菜单组件

最新推荐文章于 2024-10-31 18:32:52 发布

支猫

最新推荐文章于 2024-10-31 18:32:52 发布

阅读量686

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_45314240/article/details/116893167

版权

在这里插入图片描述

WXML

<!-- components/menu/index.wxml -->
<view class="menuC">
    <view class="flex">
        <view wx:for="{
   {arr}}" wx:key="key" data-id='{
   {item.id}}' bindtap='showkindsof' class="title-wrap" style="width:{
   {item_Width}}">
            <view>{
   {
   item.content?item.content:item.title}}</view>
        </view>
    </view>
    <!-- mask -->
    <view bindtap='closekindof' class="mask" style="display:{
   {mask}}" catchtouchmove='{
   {true}}'></view>
    <!-- select -->
    <view class="select" style="height:{
   {select_height}}" catchtouchmove='{
   {true}}'>
        <view bindtap='confirm' wx:for="{
   {select_content}}" wx:for-item="item1" wx:key="key1" class="select-item" data-name='{
   {item1.name}}' data-id="{
   {item1.id}}">{
   {
   item1.name}}</view>
    </view>
</view>

WXSS

.menuC {
   
    border-top: 1rpx solid #E6E6E6;
    border-bottom: 1rpx solid #E6E6E6;
    position: relative;
    width: 100%;
}
.menuC .flex {
   
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-it