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

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

目标场景
分类管理

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

效果

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


列表页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 (options) {
  4. that = this;
  5. if (options.objectId) {
  6. // 缓存数据
  7. that.setData({
  8. isEdit: true,
  9. objectId: options.objectId
  10. });
  11. // 请求待编辑的分类对象
  12. var query = new Bmob.Query('Category');
  13. query.get(that.data.objectId).then(function (category) {
  14. that.setData({
  15. category: category
  16. });
  17. });
  18. }
  19. },
  20. add: function (e) {
  21. var form = e.detail.value;
  22. if (form.title == '') {
  23. wx.showModal({
  24. title: '请填写分类名称',
  25. showCancel: false
  26. });
  27. return;
  28. }
  29. // 添加或者修改分类
  30. var category = new Bmob.Object('Category');
  31. // 修改模式
  32. if (that.data.isEdit) {
  33. category = that.data.category;
  34. }
  35. category.set('title', form.title);
  36. category.save().then(function (updatedCategory) {
  37. // that.setData({
  38. // category: updatedCategory
  39. // });
  40. // 操作成功提示并返回上一页
  41. wx.showModal({
  42. title: that.data.isEdit ? '修改成功' : '添加成功',
  43. showCancel: false,
  44. success: function () {
  45. wx.navigateBack();
  46. }
  47. });
  48. });
  49. },
  50. delete: function () {
  51. // 确认删除对话框
  52. wx.showModal({
  53. title: '确认删除',
  54. success: function (res) {
  55. if (res.confirm) {
  56. var category = that.data.category;
  57. category.destroy().then(function (result) {
  58. wx.showModal({
  59. title: '删除成功',
  60. showCancel: false,
  61. success: function () {
  62. wx.navigateBack();
  63. }
  64. });
  65. });
  66. }
  67. }
  68. });
  69. }
  70. })

通过onLoad事件的options回调接受objectId参数,如果存在代表是编辑状态,反之添加

添加页面,通过form取值,bindtap事件中,通用e.detail.value拿到form对象

wx.showModal,带参showCancel决定取消按钮是不是显示,点击确认或取消按钮支持回调,而showToast虽然能回调,但在wx.navigateBack()同时并发,导致会看不清Toast上的文本就返回到上一页了,所以基本都改用showModal了。res.confirm代表用户点击了确认按钮而非取消按钮。

编辑页面布局

 
         
  1. onsubmit="add">
  2. class="item">
  3. class="title">分类名称
  4. class="subtitle">
  5. type="text" name="title" value="{{category.title}}" placeholder="请填写分类名称" />
  6. class="buttons">
  7. wx:if="{{isEdit}}" class="delete" bindtap="delete">删除
  8. form-type="submit" class="confirm">{{isEdit ? '修改' : '添加'}}

判断是不是编辑状态isEdit,分别显示修改或添加样式,相应的事件也有不同,分别对应onsubmit方法与delete方法。 
编辑页样式

 
         
  1. /*每行*/
  2. .item {
  3. align-items: center;
  4. border-bottom: 1px solid #eee;
  5. background: white;
  6. margin-left: 0;
  7. }
  8. /*确认按钮*/
  9. .confirm {
  10. background: #4cd964;
  11. color: white;
  12. margin: 10px;
  13. flex: 1;
  14. }
  15. /*删除按钮*/
  16. .delete {
  17. background: #da634f;
  18. color: white;
  19. margin: 10px;
  20. flex: 1;
  21. }
  22. /*标题与文本框1/3开*/
  23. .title {
  24. flex: 1;
  25. }
  26. .subtitle {
  27. flex: 3;
  28. }
  29. /*编辑与添加按钮*/
  30. .buttons {
  31. display: flex;
  32. flex-direction: row;
  33. }

文本标签与input标记,使用flex,1: 3比例对开,编辑与删除则1: 1对半开

你可能感兴趣的:(微信小程序)