为了展示页面的主框架，这里做了三种风格的页面。第一个是个图片列表，从花瓣上抓的。第二个是个外卖的页面。第三个是个人中心页面。 一、页面功能简述 1、花瓣图片列表 用两列的瀑布流来展示，在顶部向下拉可以加载更多，滑动到底部可以加载更多图片。在网络请求数据的时候，会出现一个浮层，展示加载中的loading图标，顶部的title旁边也会出来加载中图标，等数据加载完，这两个图标都会消失。 这个页面还有个子页面，图片查看页，往后可以滑动到下一张，往前可以滑动到前一张。
列表数据来源：分析了下花瓣的网站，随便拿了个数据列表接口，通过传入不同参数来取得分页数据。 本页主要介绍：列表的排布、加载中图标的实现方式、下拉刷新的实现方式、滑动到底部加载更多的实现、navigator及参数传递的实现、引用传递的实现。 2、外卖订餐页面 页面顶部是个轮播图，几个图片轮流播放。下半部分是两个滑动的列表，菜品分类列表，和菜品详细列表，它们可以分开滑动。 本页主要介绍：轮播图组件、页面分区及各自列表滑动。 3、个人中心页面 上半部分是个人信息，下方是菜单列表。退出按钮点击后，可以从下方弹出菜单。 本页主要介绍：模态窗口、下文弹出菜单列表、toast 另外，还有下方tab菜单的实现方式。 二、图片列表的实现 1、底部加载更多 用户滑动到底部的时候，列表会自动加载下一页。 实现也比较简单，在scroll-view标签中的bindscrolltolower绑定个事件响应函数，当滑动到底部时，这个事件就会被触发。 不过这里有个问题要注意下，scroll-view要设置一个高度才行，要不然经常会滑到底部没反应，没触发。获取窗口的高度，把它设置给scroll-view就可以了：
wx.getSystemInfo({
success: ( res ) => { // 用这种方法调用，this指向Page
this.setData({
winH: res.windowHeight
});
}
});
|
默认样式，上面有个打钩图标，目前微信没有提供定制的属性。如果要显示打叉x的图标，恐怕还没法用。期待后面会更新。
|
data: {
toastHidden: true,
toastMsg: 'message'
},
toast: function(msg) {
this.setData({
toastHidden: false,
toastMsg: msg
});
},
toastChange: function(event) {
if (event.detail.value === false) {
this.setData({
toastHidden: true
});
}
},
|
|
action-sheet 有一个 bindchange 方法，当用户点击上面半透明背景时，会被触发。 action-sheet-item标签可以用多个，它会从上往下依次排列。每个上面都可以单独绑定事件。 action-sheet-cancel标签用来是额外提供的，它跟action-sheet-item的差别是，它点击后会触发action-sheet的bindchange方法。当然这个标签也可以不使用。 如果没有实现bindchange方法，点击背景时是不会把action-sheet隐藏起来的。所以我们需要实现它，很简单，也只需要setData把actionSheetHidden设置为true就行了。 五、其它 1、各页面标题 每个页面有不同的标题。在用v0.10.101400版本开发的时候，测试wx.setNavigationBarTitle方法设置的标题没有作用，会被改回去。 这里的wx.setNavigationBarTitle问题，怀疑是这个版本的工具问题，之前有个版本是可以的，更新后，在onLoad和onShow里设置title都会被覆盖回去。所以这里就只能在xxx.json里设置新的title把原来的覆盖。 demo代码中，除index页面外，其它页面都有一个xxx.json文件，内容大致如下：
{
"navigationBarTitleText": "图片详情",
"enablePullDownRefresh": false
}
|
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"iconPath": "res/img/tab/home-off.png",
"text": "首页",
"selectedIconPath": "res/img/tab/home-on.png"
}, {
"pagePath": "pages/waimai/waimai",
"iconPath": "res/img/tab/wm-off.png",
"text": "外卖",
"selectedIconPath": "res/img/tab/wm-on.png"
}, {
"pagePath": "pages/my/my",
"iconPath": "res/img/tab/my-off.png",
"text": "我的",
"selectedIconPath": "res/img/tab/my-on.png"
}],
"color":"#174578",
"selectdColor":"#3cc51f",
"borderStyle":"white",
"backgroundColor":"#116fb6"
},
|
