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

xiaoxiao2021-02-28  13

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

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

列表页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=""> <navigator< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}}<view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="add-category" bindtap="add"> <image< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> src="/images/add.png" class="icon" /> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="caption">新增分类

列表页跳转可以使用代替的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< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> onsubmit="add"> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="item"> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title">分类名称 <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="subtitle"> <input< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> type="text" name="title" value="{{category.title}}" placeholder="请填写分类名称" /> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="buttons"> <button< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:if="{{isEdit}}" class="delete" bindtap="delete">删除 <button< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> form-type="submit" class="confirm">{{isEdit ? '修改' : '添加'}}

判断是不是编辑状态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对半开

转载请注明原文地址: https://www.6miu.com/read-1150073.html

最新回复(0)