微信小程序-可移动菜单的实现过程详解

1. 目录结构

在微信小程序中，我们需要在 app.json 中定义页面路由，所以首先要确认目录结构如下：

.
├── app.js
├── app.json
├── app.wxss
├── images
│   └── ...    // 存放图片资源
└── pages
    ├── index    // 首页
    │   ├── index.js
    │   ├── index.json
    │   ├── index.wxml
    │   └── index.wxss
    ├── menu     // 菜单页面
    │   ├── menu.js
    │   ├── menu.json
    │   ├── menu.wxml
    │   └── menu.wxss
    └── list     // 列表页面
        ├── list.js
        ├── list.json
        ├── list.wxml
        └── list.wxss

2. 首页布局

在首页中，我们需要放置一个按钮来触发菜单的显示/隐藏，并为菜单和按钮设置样式，页面的布局如下：

<!-- index.wxml -->
<view class="index">

  <!-- 列表 -->
  <view class="list">
    <!-- 列表项... -->
  </view>

  <!-- 菜单 -->
  <view class="menu" hidden="{{!showMenu}}">
    <!-- 菜单项... -->
  </view>

  <!-- 菜单按钮 -->
  <view class="btn" bindtap="toggleMenu">显示/隐藏菜单</view>

</view>

在 .js 文件中，我们需要定义状态变量 showMenu，并编写 toggleMenu 函数，根据该变量的值来动态切换菜单的显示/隐藏：

// index.js
Page({
  data: {
    showMenu: false
  },
  toggleMenu() {
    this.setData({
      showMenu: !this.data.showMenu
    })
  }
})

最后，在 .wxss 文件中定义样式：

/* index.wxss */
.index {
  position: relative;   /* 以相对位置定位菜单按钮 */
  /* ... */
}
.menu {
  position: absolute;   /* 以绝对位置定位菜单 */
  /* ... */
}
.btn {
  /* ... */
}

3. 菜单布局

菜单的布局需要通过 scroll-view 实现，它可以让菜单在内容过长时进行滚动，每个菜单项可以通过样式实现拖拽效果。

<!-- menu.wxml -->
<scroll-view class="menu-list" style="height: {{menuHeight}}px;">
  <view class="menu-item" wx:for="{{menuList}}" wx:key="title"
        style="transform: translateX({{translateX}}%);">
    <view class="left">{{item.title}}</view>
    <view class="right">{{item.count}}</view>
  </view>
</scroll-view>

其中，menuList 是一个数组，它包含所有的菜单项。在 .js 文件中，我们需要监听手指滑动的事件来计算菜单项的位置，然后用 setData 更新菜单的位置信息：

// menu.js
Page({
  data: {
    startX: 0,        // 拖拽起点的X坐标
    currentX: 0,      // 拖拽中的X坐标
    menuHeight: 0,    // 菜单高度
    menuList: [       // 菜单项数组
      { title: '菜单项1', count: 10 },
      { title: '菜单项2', count: 20 },
      { title: '菜单项3', count: 30 },
      // ...
    ]
  },
  onReady() {
    wx.createSelectorQuery().in(this)
      .select('.menu-list')
      .boundingClientRect(res => {
        this.setData({
          menuHeight: res.height
        })
      })
      .exec()
  },
  onTouchStart(e) {
    // 记录起点坐标
    this.setData({
      startX: e.touches[0].pageX
    })
  },
  onTouchMove(e) {
    // 计算拖拽的X距离
    const currentX = (e.touches[0].pageX - this.data.startX) / 2;
    this.setData({
      currentX
    })
  },
  onTouchEnd(e) {
    // 更新菜单项位置信息
    const { menuList, currentX } = this.data;
    menuList.forEach(item => {
      item.tx = item.tx || 0;
      item.tx += currentX;
    });
    this.setData({
      menuList,
      startX: 0,
      currentX: 0
    })
  }
})

最后，我们需要在 .wxss 文件中定义菜单和菜单项的样式：

/* menu.wxss */
.menu-list {
  /* ... */
}
.menu-item {
  position: relative;   /* 以相对位置定位菜单项 */
  /* ... */
}
.left {
  /* 左侧样式（比如圆圈） */
}
.right {
  /* 右侧样式（比如数量） */
}

4. 示例说明

示例1：拖拽菜单实现

我们可以根据上面的代码，在菜单项放置叉叉图标，达到实现拖拽删除的效果：

<!-- menu.wxml -->
<scroll-view class="menu-list" style="height: {{menuHeight}}px;">
  <view class="menu-item" wx:for="{{menuList}}" wx:key="title"
        touch-start="onTouchStart" touch-move="onTouchMove" touch-end="onTouchEnd"
        style="transform: translateX({{item.tx}}rpx);">
    <image class="del" src="/images/del.png" wx:tap="deleteItem" hidden="{{!item.tx}}"></image>
    <view class="left">{{item.title}}</view>
    <view class="right">{{item.count}}</view>
  </view>
</scroll-view>

/* menu.wxss */
.del {
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 24rpx;
  height: 24rpx;
}

// menu.js
Page({
  // ...省略其他代码...
  deleteItem(e) {
    const { menuList } = this.data;
    const index = e.currentTarget.dataset.index;
    menuList.splice(index, 1);
    this.setData({
      menuList
    })
  }
})

示例2：左右滑动切换页面

我们可以在菜单按钮和列表页面分别添加 navigateTo 和 redirectTo 的事件，实现左右滑动切换页面的效果：

<!-- index.wxml -->
<view class="index">

  <!-- 列表 -->
  <view class="list" bindtap="gotoList">
    <!-- 列表项... -->
  </view>

  <!-- 菜单按钮 -->
  <view class="btn" bindtap="gotoMenu">显示菜单</view>

</view>

// index.js
Page({
  // ...省略其他代码...
  gotoList() {
    wx.redirectTo({
      url: '/pages/list/list'
    })
  },
  gotoMenu() {
    wx.navigateTo({
      url: '/pages/menu/menu'
    })
  }
})

// list.js
Page({
  // ...省略其他代码...
  gotoIndex() {
    wx.redirectTo({
      url: '/pages/index/index'
    })
  },
  gotoMenu() {
    wx.navigateTo({
      url: '/pages/menu/menu'
    })
  }
})

5. 总结

本篇文章详细讲解了微信小程序中实现可移动菜单的过程，通过示例说明了菜单的布局、手势事件和页面切换效果，希望能够对小程序开发者有所帮助。