微信小程序侧滑抽屉式菜单组件

GitHub代码:https://github.com/Penll/wechatapp-drawercell

做此组件之前，其实，有在简书内看到例子，但是，他给的代码不全，后面就觉得，参照他部分前提下改造完全，并分享给大家。

侧滑抽屉菜单，实现效果图（实际，滑动是跟着手指慢慢移动，下面gif中，其实都算自动展开效果）：

temp.gif

该cell列表已经封装到组件

index页面调用：

<view class="page">
  <list-cell bind:onCellTap="bindCellTapHandler" bind:onOperateTap="bindOperateTapHandler" dataList="{{messageList}}"></list-cell>
</view>

组件属性中绑定了两个事件，bindCellTapHandler即单个cell的点击事件；bindOperateTapHandler即滑出的菜单选项点击事件。具体点击哪个菜单，在方法内根据operateName，我这里只是根据字符串直接switch.

组件 list-cell.wxml 代码

<view class="pic-listcell-view" hidden="{{hidden}}">
  <view class="cell-item-view" wx:for="{{dataList}}" wx:key="key" data-value="{{item}}" data-index="{{index}}" bindtap="_bindCellTapHandler">
    <view class="cell-item" data-index="{{index}}" bindtouchstart="_cellTouchStart" bindtouchmove="_cellTouchMove" bindtouchend="_cellTouchEnd" style="left:{{item.cellMoveLeftDistance?item.cellMoveLeftDistance:0}}px">
      <!-- TODO：根据类型调用对应模版 -->
      <template is="cell-item-message" data="{{item:item}}"></template>
    </view>
    <view class="cell-operate-items">
      <template is="cell-item-operates" data="{{itemIndex:index,operateItemWidth:operateItemWidth,hasCloseNotice:item.hasCloseNotice}}"></template>
    </view>
  </view>
</view>

<template name="cell-item-operates">
  <view class="operate-item">
  </view>

  <view catchtap="_bindOperateTapHandler" class="operate-item blue}}" style="{{operateItemWidth?'width:'+operateItemWidth+'rpx':''}}" data-index="{{itemIndex}}" data-value='{{hasCloseNotice?"打开提醒":"关闭提醒"}}'>
    <text>{{hasCloseNotice?"打开提醒":"关闭提醒"}}</text>
  </view>

  <view catchtap="_bindOperateTapHandler" class="operate-item gray" style="{{operateItemWidth?'width:'+operateItemWidth+'rpx':''}}" data-index="{{itemIndex}}" data-value="已读">
    <text>已读</text>
  </view>
</template>

<!-- 用于消息的 cell-item模版 -->
<template name="cell-item-message">
  <template is="cell-item-leftpic" data="{{picUrl:item.pic,isRadiusCorner:true}}"></template>
  <template is="cell-item-middle" data="{{title:item.title,des:item.describeInfo}}"></template>
  <template is="cell-item-right-message" data="{{date:item.formatUpdate,hasNewPoint:item.hasNewPoint,hasCloseNotice:item.hasCloseNotice}}"></template>
</template>

<!-- 左边图 通用 图片是否方形判断 -->
<template name="cell-item-leftpic">
  <view class="left-pic-container">
    <block wx:if="{{picUrl}}">
      <image class="pic {{isRadiusCorner?'radius-corner':''}}" src='{{picUrl}}' mode="aspectFill"></image>
    </block>
    <block wx:else>
      <image class="pic" src='../../../resources/images/img_user_default.png' mode="aspectFill"></image>
    </block>
  </view>
</template>

<!-- 中间 标题&描述   标题加粗 与否判断 -->
<template name="cell-item-middle">
  <view class="middle-des">
    <view class="title {{isNormalTitle?'normal-title':''}}">
      {{title}}
    </view>
    <view class="middle-description">
      <view class="description">{{des}}</view>
    </view>
  </view>
</template>

<!-- 右边 箭号 -->
<template name="cell-item-right-arrow">
  <view class="right-view">
    <image class="right-arrow" src="../../../resources/images/img_arrow.png"></image>
  </view>
</template>

<!-- 右边 消息提示 -->
<template name="cell-item-right-message">
  <view class="right-view-message">
    <view class="date">{{date}}</view>
    <!-- 关闭通知 -->
    <view class="notice-view">
      <view wx:if="{{hasCloseNotice}}" class="notice-item icon-item">
        <image src="../../../resources/images/img_close_notify.png"></image>
      </view>
      <view wx:if="{{hasNewPoint}}" class="notice-item newPoint">
        NEW
      </view>
    </view>
  </view>
</template>

组件 list-cell.wxss

.pic-listcell-view {
    background-color: #fff;
    border-top: 2rpx solid #ececec;
    border-bottom: 2rpx solid #ececec;
}

.cell-item-view {
    border-bottom: 2rpx solid #ececec;
    height: 21.5vw;
    position: relative;
}

.cell-item-view:last-child {
    border: none;
}

.cell-item {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 4.8vw;
    z-index: 2;
    background-color: #fff;
}

/* 左边 图片 */

.left-pic-container {
    position: relative;
    height: 14.67vw;
}

.left-pic-container .pic {
    width: 14.67vw;
    height: 14.67vw;
    overflow: hidden;
    border: 2rpx #ececec solid;
    /* will-change: transform; 这里如果加willchange 会导致，抽屉回弹的时候，头像变成空白 */
}

.left-pic-container .radius-corner {
    border-radius: 50%;
}

/* 中间 */

.middle-des {
    vertical-align: center;
    flex-grow: 1;
    margin: 0 3.2vw;
    line-height: 8vw;
    white-space: nowrap;
}

.middle-des .title {
    font-weight: bold;
    color: #3c281e;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 4.27vw;
    max-width: 76vw;
    text-overflow: ellipsis;
}

.normal-title {
    font-weight: normal !important;
}

.middle-description {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.middle-description .description {
    font-size: 3.6vw;
    color: #979797;
}

/* 消息的右边 样式 */

.right-view-message {
    background-color: #fff;
    flex-direction: column;
}

.right-view-message .date {
    color: #8c8282;
    font-size: 3.2vw;
    margin-bottom: 2vw;
    width: 100%;
    text-align: end;
}

.right-view-message .notice-view {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}

.notice-view .notice-item {
    margin-left: 1.6vw;
}

.notice-view .icon-item {
    width: 4.6vw;
    height: 4.6vw;
}

.notice-view image {
    width: 100%;
    height: 100%;
}

/* 右侧 滑出的操作选项 */

.cell-operate-items {
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
}

.cell-operate-items .operate-item {
    /* width: 200rpx; */
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
}

.cell-operate-items .operate-item:first-child {
    flex-grow: 1;
}

.gray {
    background-color: #C8BEBE;
}

.blue {
    background-color: #82B4FF;
}

/* 红点 */

.newPoint {
    background-color: #fa8278;
    border-radius: 50rpx;
    width: 10vw;
    height: 4.8vw;
    line-height: 4.8vw;
    text-align: center;
    color: #fff;
    font-size: 3vw;
}

组件list-cell.js

这里代码太多，就不全部黏贴出来，可以去GitHub下载https://github.com/Penll/wechatapp-drawercell
注意：CELL_MAX_MOVE适配宽屏这里要根据屏幕计算

TODO 代办：

滑动到一定距离，未到达最大宽度（最小宽度）情况下，自动打开（关闭）动画会卡顿问题，暂时已注释掉，目前，直接展开最大距离
优化其他地方

微信小程序 侧滑抽屉式 菜单 组件

index页面调用：

组件 list-cell.wxml 代码

推荐阅读更多精彩内容

微信小程序侧滑抽屉式菜单组件