用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

黄秀杰小程序入门佳品——增删改查+页面跳转+传值取值+布局样式 ... ... ...

Rolan 2017-8-2 10:14

技术点:读取分类列表点击某分类进入编辑页,操作编辑与删除点击列表页底部按钮,跳转添加,共用编辑页

目标场景
分类管理

技术点
  • 读取分类列表
  • 点击某分类进入编辑页,操作编辑与删除
  • 点击列表页底部按钮,跳转添加,共用编辑页

效果


列表页js

  1. var Bmob = require('../../utils/bmob.js');var that;
  2. Page({
  3. onLoad: function () {
  4. that = this;
  5. },
  6. onShow: function () {
  7. that.loadCategories();
  8. },
  9. loadCategories: function () {
  10. var query = new Bmob.Query('Category');
  11. query.limit(Number.Max_VALUE);
  12. query.find().then(function (categories) {
  13. console.log(categories);
  14. that.setData({
  15. categories: categories
  16. });
  17. });
  18. },
  19. add: function () {
  20. // 跳转添加页面
  21. wx.navigateTo({
  22. url: '../add/add'
  23. });
  24. },
  25. })

可以看到,上面使用了onShow代替了onLoad作为加载请求loadCategories,这是因为考虑到添加完毕后会有返回上页,能和自刷新最新数据。

相应的布局页面

  1. class="item" wx:for="{{categories}}" wx:key="">
  2. class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}}
  3. class="add-category" bindtap="add">
  4. src="/images/add.png" class="icon" />
  5. class="caption">新增分类

列表页跳转可以使用代替的bindtap,这样更简洁一些;而底部的添加按钮使用position: fixed固定底部;wx:for循环提供objectId作为参数,以传递给编辑页面。

编辑页面

  1. var Bmob = require('../../utils/bmob.js');var that;
  2. Page({
  3. onLoad: function (
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: Rolan

相关阅读

  • kenneth 2017-8-13 11:40
    大兄弟,没源码啊   
    而且bmob.js文件都没有,这不是个坑么?