本文详细介绍了美团外卖页面的交互设计，包括页面路由跳转、滚动监听、点击事件监听及纵向滚动设置等关键技术实现，同时讲解了如何使用scroll-y属性允许页面纵向滚动，以及设置空格的方法。
美团外卖页面
1、页面路由
newpage:function(){
// 跳转到页面
wx.navigateTo({
url: '../scout/scout',
})
}
·navigateTo, redirectTo 只能打开非 tabBar 页面。
·switchTab 只能打开 tabBar 页面。
·reLaunch 可以打开任意页面。
2、滚动监听
wx.pageScrollTo(Object object)将页面滚动到目标位置
|
属性 |
类型 |
默认值 |
必填 |
说明 |
|
scrollTop |
number |
|
是 |
滚动到页面的目标位置，单位 px |
scrollTopfun:function(e){
this.setData({
top: e.detail.scrollTop
})
// console.log(e.detail.scrollTop);
}
3、点击事件监听
click:function(){
this.setData({
top: 260,
flag:true
})
}
4、纵向滚动
|
属性 |
类型 |
默认值 |
必填 |
说明 |
|
scroll-y |
boolean |
false |
否 |
允许纵向滚动 |
5、设置空格
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| space | string | 否 | 显示连续空格 |
space 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| ensp | 中文字符空格一半大小 | |
| emsp | 中文字符空格大小 | |
| nbsp | 根据字体设置的空格大小 |
练习：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
