用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

536

主题

922

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13330
2017-8-2 10:07:55 Rolan 管理员 楼主 12833
目标场景
分类管理

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

效果
0.gif

列表页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,这是因为考虑到添加完毕后会有返回上页,能和自刷新最新数据。

相应的布局页面


  • <!-- 分类管理 -->
  • <view class="item" wx:for="{{categories}}" wx:key=""><!-- <view class="title" >{{item.title}}</view> -->
  •     <navigator class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}}</navigator>
  • </view>
  • <!-- 添加按钮 -->
  • <view class="add-category" bindtap="add">
  •     <image src="/images/add.png" class="icon" />
  •     <view class="caption">新增分类</view>
  • </view>

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

编辑页面


  • var Bmob = require('../../utils/bmob.js');var that;
  • Page({
  •     onLoad: function (options) {
  •         that = this;        
  •         if (options.objectId) {
  •             // 缓存数据
  •             that.setData({
  •                 isEdit: true,
  •                 objectId: options.objectId
  •             });            
  •             // 请求待编辑的分类对象
  •             var query = new Bmob.Query('Category');
  •             query.get(that.data.objectId).then(function (category) {
  •                 that.setData({
  •                     category: category
  •                 });
  •             });
  •         }
  •     },
  •     add: function (e) {
  •         var form = e.detail.value;
  •         if (form.title == '') {
  •             wx.showModal({
  •                 title: '请填写分类名称',
  •                 showCancel: false
  •             });            
  •             return;
  •         }        
  •         // 添加或者修改分类
  •         var category = new Bmob.Object('Category');
  •         // 修改模式
  •         if (that.data.isEdit) {
  •             category = that.data.category;
  •         }
  •         category.set('title', form.title);
  •         category.save().then(function (updatedCategory) {
  •             // that.setData({
  •             //  category: updatedCategory
  •             // });
  •             // 操作成功提示并返回上一页
  •             wx.showModal({
  •                 title: that.data.isEdit ? '修改成功' : '添加成功',
  •                 showCancel: false,
  •                 success: function () {
  •                     wx.navigateBack();
  •                 }
  •             });
  •         });
  •     },   
  •     delete: function () {
  •         // 确认删除对话框
  •         wx.showModal({
  •             title: '确认删除',
  •             success: function (res) {
  •                 if (res.confirm) {                    
  •                 var category = that.data.category;
  •                     category.destroy().then(function (result) {
  •                         wx.showModal({
  •                             title: '删除成功',
  •                             showCancel: false,
  •                             success: function () {
  •                                 wx.navigateBack();
  •                             }
  •                         });
  •                     });
  •                 }
  •             }
  •         });
  •     }
  • })

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

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

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

编辑页面布局


  • <!-- 分类管理 -->
  • <form onsubmit="add">
  •     <view class="item">
  •         <view class="title">分类名称</view>
  •         <view class="subtitle">
  •             <input type="text" name="title" value="{{category.title}}" placeholder="请填写分类名称" />
  •         </view>
  •     </view>
  •     <view class="buttons">
  •         <button wx:if="{{isEdit}}" class="delete" bindtap="delete">删除</button>
  •         <button form-type="submit" class="confirm">{{isEdit ? '修改' : '添加'}}</button>
  •     </view>
  • </form>

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


  • /*每行*/
  • .item {   
  •     align-items: center;
  •     border-bottom: 1px solid #eee;
  •     background: white;
  •     margin-left: 0;
  • }
  • /*确认按钮*/
  • .confirm {
  •     background: #4cd964;
  •     color: white;   
  •     margin: 10px;   
  •     flex: 1;
  • }
  • /*删除按钮*/
  • .delete {
  •     background: #da634f;   
  •     color: white;   
  •     margin: 10px;   
  •     flex: 1;
  • }
  • /*标题与文本框1/3开*/
  • .title {
  •     flex: 1;
  • }
  • .subtitle {
  •     flex: 3;
  • }
  • /*编辑与添加按钮*/
  • .buttons {
  •     display: flex;   
  •     flex-direction: row;
  • }

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

很多朋友好奇我是做什么的,事实上我目前全职做开源,有心者可以赞赏,方便的话,请留下大名。
640.webp.jpg

源码下载:关注公众号【黄秀杰】,回复112。本文代码涉及代码位于admin-dev分支下的category文件夹。



有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
还可以加QQ交流群咨询:536592077。
大兄弟,没源码啊   
而且bmob.js文件都没有,这不是个坑么?
发新帖
您需要登录后才可以回帖 登录 | 立即注册