微信小程序代码,分类管理, 类别增删改查

时间: 2023-10-17 16:52:10 浏览: 46
好的,以下是一个简单的微信小程序分类管理的示例代码,包括类别的增删改查功能: 1. 分类列表页面 categoryListPage: ``` <view class="category-list"> <view class="category-item" wx:for="{{categoryList}}" wx:key="{{item.id}}" bindtap="editCategory"> <image src="{{item.icon}}" class="category-icon" /> <view class="category-name">{{item.name}}</view> <image src="/images/edit.png" class="edit-icon" /> <image src="/images/delete.png" class="delete-icon" bindtap="deleteCategory" /> </view> </view> <view class="add-category" bindtap="addCategory">新增分类</view> ``` 2. 新增分类页面 addCategoryPage: ``` <view class="add-category-page"> <form bindsubmit="submitForm"> <view class="form-item"> <label>分类名称:</label> <input type="text" name="name" placeholder="请输入分类名称" /> </view> <view class="form-item"> <label>分类图标:</label> <input type="file" name="icon" accept="image/*" /> </view> <button form-type="submit">提交</button> </form> </view> ``` 3. 编辑分类页面 editCategoryPage: ``` <view class="edit-category-page"> <form bindsubmit="submitForm"> <view class="form-item"> <label>分类名称:</label> <<input type="text" name="name" placeholder="请输入分类名称" value="{{category.name}}" /> </view> <view class="form-item"> <label>分类图标:</label> <input type="file" name="icon" accept="image/*" value="{{category.icon}}" /> </view> <button form-type="submit">提交</button> </form> </view> ``` 4. 小程序逻辑代码 app.js: ``` App({ // 初始化数据 globalData: { categoryList: [ { id: 1, name: '分类1', icon: '/images/category1.png' }, { id: 2, name: '分类2', icon: '/images/category2.png' }, { id: 3, name: '分类3', icon: '/images/category3.png' } ], currentCategory: null }, // 新增分类 addCategory: function (category) { category.id = this.globalData.categoryList.length + 1; this.globalData.categoryList.push(category); }, // 修改分类 editCategory: function (category) { var categoryList = this.globalData.categoryList; for (var i = 0; i < categoryList.length; i++) { if (categoryList[i].id == category.id) { categoryList[i] = category; break; } } }, // 删除分类 deleteCategory: function (category) { var categoryList = this.globalData.categoryList; for (var i = 0; i < categoryList.length; i++) { if (categoryList[i].id == category.id) { categoryList.splice(i, 1); break; } } }, // 根据分类名称查询分类列表 searchCategoryList: function (keyword) { var categoryList = this.globalData.categoryList; if (keyword) { categoryList = categoryList.filter(function (category) { return category.name.toLowerCase().indexOf(keyword.toLowerCase()) >= 0; }); } return categoryList; } }) ``` 5. 分类列表页面的事件处理函数: ``` Page({ // 点击编辑分类 editCategory: function (event) { var category = event.currentTarget.dataset.category; getApp().globalData.currentCategory = category; wx.navigateTo({ url: '/pages/editCategory/editCategory' }); }, // 点击删除分类 deleteCategory: function (event) { var category = event.currentTarget.dataset.category; wx.showModal({ title: '提示', content: '确定要删除该分类吗?', success: function (res) { if (res.confirm) { getApp().deleteCategory(category); getApp().globalData.currentCategory = null; wx.showToast({ title: '删除成功' }); } } }); }, // 点击新增分类 addCategory: function () { wx.navigateTo({ url: '/pages/addCategory/addCategory' }); }, // 页面加载时查询分类列表 onLoad: function () { this.setData({ categoryList: getApp().globalData.categoryList }); }, // 搜索分类 searchCategory: function (event) { var keyword = event.detail.value; var categoryList = getApp().searchCategoryList(keyword); this.setData({ categoryList: categoryList }); } }) ``` 6. 新增分类页面和编辑分类页面的事件处理函数: ``` Page({ data: { category: {} }, // 页面加载时初始化数据 onLoad: function () { var category = getApp().globalData.currentCategory || {}; this.setData({ category: category }); }, // 提交表单 submitForm: function (event) { var category = event.detail.value; if (category.name) { var filePath = event.detail.value.icon; if (filePath) { // 上传图片并保存分类数据 wx.uploadFile({ url: 'https://example.com/upload', filePath: filePath, name: 'icon', success: function (res) { category.icon = res.data; if (getApp().globalData.currentCategory) { getApp().editCategory(category); } else { getApp().addCategory(category); } getApp().globalData.currentCategory = null; wx.showToast({ title: '保存成功' }); wx.navigateBack(); } }); } else { // 仅保存分类数据 if (getApp().globalData.currentCategory) { category.id = getApp().globalData.currentCategory.id; category.icon = getApp().globalData.currentCategory.icon; getApp().editCategory(category); } else { getApp().addCategory(category); } getApp().globalData.currentCategory = null; wx.showToast({ title: '保存成功' }); wx.navigateBack(); } } else { wx.showToast({ title: '请输入分类名称', icon: 'none' }); } } }) ``` 以上就是一个简单的微信小程序分类管理的示例代码,包括类别的增删改查功能。需要注意的是,示例中上传图片的部分仅作为演示,需要根据自己的实际需求进行修改和扩展。

相关推荐

最新推荐

recommend-type

grpcio-1.63.0-cp38-cp38-linux_armv7l.whl

Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
recommend-type

SQLyog-13.1.3-0.x86Community.exe

SQLyog-13.1.3-0.x86Community
recommend-type

VB自动出题题库系统设计(源代码+系统).rar

计算机专业毕业设计VB精品论文资源
recommend-type

debugpy-1.0.0b2-cp35-cp35m-manylinux1_i686.whl

Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
recommend-type

实战自学python如何成为大佬(目录):https://blog.csdn.net/weixin-67859959/artic

实战自学python如何成为大佬(目录):https://blog.csdn.net/weixin-67859959/artic
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

MATLAB柱状图在信号处理中的应用:可视化信号特征和频谱分析

![matlab画柱状图](https://img-blog.csdnimg.cn/3f32348f1c9c4481a6f5931993732f97.png) # 1. MATLAB柱状图概述** MATLAB柱状图是一种图形化工具,用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。 柱状图的优点在于其简单易懂,能够直观地展示数据分布。在信号处理中,柱状图可以帮助工程师识别信号中的模式、趋势和异常情况,从而为信号分析和处理提供有价值的见解。 # 2. 柱状图在信号处理中的应用 柱状图在信号处理
recommend-type

用Spring boot和vue写一个登录注册界面

好的,这是一个比较常见的技术问题,我可以为您提供一些参考资料和思路。首先,您可以使用Spring Boot作为后端框架来处理用户认证和注册的逻辑,比如使用Spring Security实现用户登录认证。同时,您还需要设计相应的数据模型和数据库表结构来存储用户信息。在前端方面,您可以使用Vue.js作为框架来构建登录注册页面,使用Axios来发起API请求并和后端进行交互。当然,在实现过程中,还需要考虑一些具体细节,比如数据校验、安全性和用户体验等方面。希望这些信息能够帮助到您。
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。