找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

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

作者:模板之家 2018-4-23 11:07 2257人关注

目标场景 分类管理 技术点 读取分类列表 点击某分类进入编辑页,操作编辑与删除 点击列表页底部按钮,跳转添加,共用编辑页 效果 列表页js var Bmob = require(../../utils/bmob.js);var that;

目标场景
分类管理

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


列表页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.  
  2. class="item" wx:for="{{categories}}" wx:key="">
  3. class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}}
  4.  
  5.  
  6. class="add-category" bindtap="add">
  7. src="/images/add.png" class="icon" />
  8. class="caption">新增分类
  9.  

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

编辑页面

 

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


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)