目标场景
分类管理
技术点
-
读取分类列表
-
点击某分类进入编辑页,操作编辑与删除
-
点击列表页底部按钮,跳转添加,共用编辑页
效果
列表页js
-
var Bmob = require('../../utils/bmob.js');var that;
-
Page({
-
onLoad: function () {
-
that = this;
-
},
-
onShow: function () {
-
that.loadCategories();
-
},
-
loadCategories: function () {
-
var query = new Bmob.Query('Category');
-
query.limit(Number.Max_VALUE);
-
query.find().then(function (categories) {
-
console.log(categories);
-
that.setData({
-
categories: categories
-
});
-
});
-
},
-
add: function () {
-
// 跳转添加页面
-
wx.navigateTo({
-
url: '../add/add'
-
});
-
},
-
})
可以看到,上面使用了onShow代替了onLoad作为加载请求loadCategories,这是因为考虑到添加完毕后会有返回上页,能和自刷新最新数据。
相应的布局页面
-
-
class="item" wx:for="{{categories}}" wx:key="">
-
class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}}
-
-
-
class="add-category" bindtap="add">
-
src="/images/add.png" class="icon" />
-
class="caption">新增分类
-
列表页跳转可以使用代替的bindtap,这样更简洁一些;而底部的添加按钮使用position: fixed固定底部;wx:for循环提供objectId作为参数,以传递给编辑页面。
编辑页面
-
var Bmob = require('../../utils/bmob.js');var that;
-
Page({
-
onLoad: function (
-
|