微信小程序——事件备忘录

效果预览

<!--index.wxml-->
<view class='page'><view class='nav'><view bindtap='click1' class='{{nav1}}'><text>待办</text></view><view bindtap='click2' class='{{nav2}}'><text>已办</text></view></view><view class='body'><!-- 待办开始 --><view wx:if="{{condition1}}"><view class='guide'><text>单机完成事项</text></view><view class='list1' wx:for="{{array}}" id='{{index}}' bindtap='short'>{{item}}</view><!-- 输入框增加 --><view class='btn'><button bindtap="click" type='primary'>增加</button></view></view><view class='area' wx:if="{{input}}"><textarea bindconfirm='confirm' auto-height placeholder='输入待办事项'></textarea></view><!-- 待办结尾--><!-- 已办开始 --><view wx:if="{{condition2}}" class='finish'><view class="list2" wx:for="{{array1}}">{{item}}</view></view><!-- 已办结尾 --></view>
</view>

/**index.wxss**/
.page {margin: 0rpx 50rpx 50rpx 50rpx;text-align: center;
}.nav {display: flex;flex-direction: row;font-size: 70rpx;
}.nav1 {flex: 1;background-color: red;
}.nav2 {flex: 1;background-color: lightgray;
}.body {background-color: lightcyan;
}.guide {font-size: 50rpx;text-align: left;color: green;
}.list1 {font-size: 50rpx;border: 1rpx;border-color: black;border-style: solid;
}.btn {margin: 50rpx 0rpx 0rpx 0rpx;
}.area {background-color: white;
}.list2 {font-size: 50rpx;border: 1rpx;border-color: black;border-style: solid;background-color: pink;
}

//index.js
var arrayincp = [] //待办
var arraycp = [] //已办
var array //待办
var array1 //已办
Page({data: {array: arrayincp,array1: arraycp,condition1: true,condition2: false,input: false,nav1: "nav1",nav2: "nav2"},//页面加载，提取保存数据onLoad: function (options) {var that = thiswx.getStorage({key: 'array',success: function (res) {var arraystore = res.dataconsole.log(arraystore)arrayincp = arraystore[0]arraycp = arraystore[1]that.setData({array: arrayincp,array1: arraycp,})}})},//点击待办click1: function(e) {this.setData({condition1: true,condition2: false,nav1: "nav1",nav2: "nav2",input: false})},//点击已办click2: function(e) {this.setData({condition1: false,condition2: true,nav1: "nav2",nav2: "nav1",input: false})},//待办变已办short: function(e) {var id = e.target.idvar newitem = arrayincp[id]arrayincp.splice(id, 1)arraycp.push(newitem)this.setData({array: arrayincp,array1: arraycp,})},//增加click: function(e) {this.setData({input: true,condition1: false,condition2: false,nav1: "nav2",nav2: "nav2",})},// 输入完成confirm: function(e) {arrayincp.push(e.detail.value)this.setData({array: arrayincp,input: false,condition1: true,condition2: false,nav1: "nav1",nav2: "nav2",})},//卸载页面，储存数据onUnload: function() {var arraystore = [arrayincp, arraycp]wx.setStorage({key: "array",data: arraystore})},
})

wx.getStorage(Object object）官方文档

微信小程序——事件备忘录相关推荐

【毕业设计】基于微信小程序的备忘录记事助手
文章目录 1 前言 2 简介 3 部分实现步骤与代码 3.1 对象方法属性 3.2 箭头函数(Arrow Function) 3.3 日历 4 最后 1 前言 Hi,大家好,学长今天向大家介绍一个小 ...
微信小程序项目实例——备忘录
微信小程序项目实例--备忘录文章目录微信小程序项目实例--备忘录一.项目展示二.项目介绍三.核心代码项目代码见文字底部,点赞关注有惊喜一.项目展示二.项目介绍项目是一个备忘录,拥有记 ...
Android微信小程序原理,微信小程序事件流原理解析
这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一.什么是事件? 事件是视图层到逻辑层的通讯方式: 事件可 ...
微信小程序事件传参
微信小程序事件传参 wxml部分 js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="de ...
【微信小程序/事件】事件响应的各种场景
[微信小程序/事件]事件响应的各种场景 bindtap:点击事件 (1)使用范例 bindfocus:聚焦事件 (1)使用范例 bindblur:失焦事件 (1)使用范例 bindinput:输入事件 ...
微信小程序前端备忘录记事本搜索功能
微信小程序搜索功能,小程序自带weui, 阅读文档,WeUI组件库简介 | 微信开放文档 (qq.com) 1推荐使用方法: 在//app.json中录下下列句子 "useExtendedL ...
2023基于微信小程序的备忘录英语学习资源交流平台(SSM+mysql)-JAVA.VUE(论文+开题报告+运行)
摘要随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟.本文介绍了英语学习交流平台小程序的开发全过程.通过分析英语学习交流平台小程序管理的不足,创建了一个计算机管理英语 ...
微信小程序事件始末及相关资料整理
转载请注明来源:前端之巅微信公众号小道消息昨晚(9月21日晚)10:51,冯大辉在他的知名微信公众号小道消息上发了一篇7字标题的文章<微信应用号来了>,并加了"微信是一个操 ...
微信小程序----事件绑定
前言小程序中绑定事件, 通过bind关键字来实现.如: bindtap bindinput bindchanges等不同的组件支持不同的事件,具体查看组件的说明即可. 今天我们来了解bindtap和 ...
微信小程序事件和页面跳转
一.页面跳转 1.非TabBar页面一个小程序拥有多个页面,我们通过wx.navigateTo进入一个新的页面我们通过下边点击事件实现页面跳转进行代码实现及参考 wx.navigateBack() ...

微信小程序——事件备忘录

效果预览

微信小程序——事件备忘录相关推荐

最新文章

热门文章