微信小程序-可移动菜单的实现过程详解
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. 总结
本篇文章详细讲解了微信小程序中实现可移动菜单的过程,通过示例说明了菜单的布局、手势事件和页面切换效果,希望能够对小程序开发者有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序-可移动菜单的实现过程详解 - Python技术站