基于钉钉小程序做一个记事本

第一个页面

<!--textarea.axml-->
<view>
<view class="page" a:for="{{notes}}"><view class="page-section" data-index={{index}} data-content={{item.content}} onTap="updateNote"><view class="content">{{item.content.substring(0,10)+'...'}}</view><view class="writeTime">{{item.writeTime}}</view><view class="btn_img" catchTap="del" data-index={{index}}></view></view>
</view>
<modal show="{{showSearchModal}}" height='30%' onCancel="searchModalCancel" onSubmit='searchModalSubmit'><view class="remind_del"><image mode="scaleToFill" src="/page/image/remind_del.png"/></view>
</modal>
<view><button class="btn" onTap="toPage13">增加</button></view>
<view><button style="top:420px;background-color:red;" class="btn" onTap="deleteAll">删除</button></view>
</view>

.page {font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;padding: 8rpx;flex: 1;
}
.content{font-size: x-large;color: black;font-weight: bolder;
}
.writeTime{height: 20px;font-size: large;color: dimgrey;padding-top: 12px;
}.btn_img{z-index: 9;position: fixed;background: url('/page/image/del.png');margin-top: -50px;margin-left: 280px;width: 50px;height: 50px;
}.remind_del{margin: 0 auto;width:300px;height:60px;
}.btn {z-index: 10;width: 50px;height: 50px;color: cornsilk;font-family: 黑体,宋体,Arieal;font-weight: bold;background-color: gray;border-radius: 50%;border: 1px solid black;right: 30px;top: 350px;position: absolute;
}

Page({data: {notes: [],showSearchModal: false,},onShow(){dd.getStorage({key: 'notes',success: (res) => {if(res.data!==null){const notes = res.data;this.setData({notes})}},fail: function(res){dd.alert({content: res.errorMessage});}
});},toPage13(){dd.redirectTo({url:'/page/page12_1/index'});},updateNote(event){const content= event.target.dataset.content;const index= event.target.dataset.index;dd.redirectTo({url:'/page/page12_1/index?content='+content+'&index='+index});},del(event){const index= event.target.dataset.index;console.log(index);//设置data，设置缓存const notes = this.data.notes;notes.splice(index,1);this.setData({notes});//写入缓存dd.setStorage({key: 'notes',data: notes,success: function() {dd.alert({content: '删除成功'});}});},deleteAll(){this.setData({showSearchModal: true})},searchModalCancel(){this.setData({showSearchModal: false,});},searchModalSubmit(){this.setData({showSearchModal: false,});var _this = this;dd.removeStorage({key: 'notes',success: function(){dd.alert({content: '删除成功'});_this.setData({notes: []})}
});
},});

{"defaultTitle": "记事本","usingComponents": {"modal": "/page/component/modal/modal" }
}

第二个页面

<!--textarea.axml-->
<view class="page"><view class="page-section"><form onSubmit="bindFormSubmit"><view class="page-section-demo"><textarea name="textarea"placeholder="Please input something" value={{note.content}}></textarea></view><view class="page-section-btns"><button onTap="back" size="mini" type="primary">返回</button><button form-type="submit" size="mini" type="primary">提交</button></view>  </form></view>
</view>

textarea{height:300px;
}

Page({data: {note: {}},onLoad(options){console.log(options)const note = {content: options.content,index: options.index}this.setData({note});},onShow(){},bindButtonTap() {this.onFocus();},onFocus() {this.setData({focus: true,});},onBlur() {this.setData({focus: false,});},bindTextAreaBlur(e) {console.log(e.detail.value);},bindFormSubmit(e) {if(e.detail.value.textarea===""){console.alert("提交失败，内容为空！");return;}var tempNotes;//先读出缓存数据dd.getStorage({key: 'notes',success: (res) => {console.log("缓存数据：",res.data);if(res.data===null){tempNotes = [];}else{tempNotes = res.data;}const note = {content: e.detail.value.textarea,writeTime: new Date().toLocaleDateString(),}const index = this.data.note.index;if(index){tempNotes[index] = note;}else{tempNotes.push(note);}console.log("写入缓存数据",tempNotes)//写入缓存dd.setStorage({key: 'notes',data: tempNotes,success: function() {dd.alert({content: '写入成功'});}});},fail: function(res){dd.alert({content: res.errorMessage});}});},back(){dd.redirectTo({url:'/page/page12/index'});}
});

{"defaultTitle": "记事本"
}

自定义组件

<view class='mask' a:if='{{show}}' onTap='clickMask'><view class='modal-content' style='height:{{height}}'><scroll-view scroll-y class='main-content'><slot></slot></scroll-view><view class='modal-btn-wrapper'><view class='cancel-btn' style='color:rgba(7,17,27,0.6)' onTap='cancel'>取消</view><view class='confirm-btn' style='color:#13b5f5' onTap='submit'>确定</view></view></view>
</view>

.mask{position: absolute;top: 0;bottom: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(0,0,0,0.4);z-index: 9999;
}.modal-content{flex-direction: column;width: 90%;/* height: 80%; */position: fixed;top: 10%;left: 5%;background-color: #fff;border-radius: 10rpx;
}.modal-btn-wrapper{display: flex;flex-direction: row;height: 100rpx;line-height: 100rpx;background-color: #fff;border-radius: 10rpx;border-top: 2rpx solid rgba(7,17,27,0.1);
}.cancel-btn, .confirm-btn{flex: 1;height: 100rpx;line-height: 100rpx;text-align: center;font-size: 32rpx;
}.cancel-btn{border-right: 2rpx solid rgba(7,17,27,0.1);
}.main-content{flex: 1;height: 100%;overflow-y: hidden;
}

/*** 自定义modal浮层* 使用方法：* <modal show="{{showModal}}" height='80%' onCancel="modalCancel" onSubmit='modalSubmit'><view>你自己需要展示的内容</view></modal>属性说明：show： 控制modal显示与隐藏height：modal的高度onCancel：点击取消按钮的回调函数onSubmit：点击确定按钮的回调函数*/Component({/*** 组件的属性列表*/props: {// modal的默认高度height: '60%',//是否显示modalshow: false,// submit()onSubmit:(data) => console.log(data),// onCancel()onCancel:(data) => console.log(data),},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {clickMask() {// this.setData({show: false})},cancel(e) {// this.setData({ show: false });this.props.onCancel(e);},submit(e) {// this.setData({ show: false });this.props.onSubmit(e);}}})

 {"component": true,"usingComponents": {}}

基于钉钉小程序做一个记事本相关推荐

uniappp小程序做一个红包雨的功能
uniappp小程序做一个红包雨的功能需求: 首先,您需要在页面中添加一个画布元素,用于绘制红包雨效果. 在页面加载完成后,使用JavaScript中的setInterval()方法定时执行绘制红包 ...
微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
微信小程序做一个调查问卷
用微信小程序做了一个调查问卷功能描述: 用户一天只能进行一次问卷调查=>用户登录功能获取用户意见信息题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项多选题选择个数设置 ...
小程序做一个能够左右滑动切换的多tab页面
主要原理:使用 <swiper> 和 <scroll-view> 组件代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...
使用微信小程序做一个简易的下拉框，无动画效果，纯原生写法（下拉列表框）
最近在开发的时候,需要使用下拉的效果,但是之前并没有进行书写过,今天做一个简单的demo,来记录一下微信小程序开发的下拉框效果. 微信小程序和jquery最大的区别就是是否操作dom, 微信小程序无需 ...
微信小程序|做一个底部评论视图
使用微信小程序开发工具做一个和微信一样的评论视图: 首先我们捋一下这个视图的结构: 黑色的容器最大包含三个横向并列的三个红色的容器第一个红色的容器包含两个橘色的纵向并列的容器. 这样,ind ...
干洗店小程序做一个预约小程序有什么优点
洗衣店洗鞋店为什么要开发一个下单小程序冬季衣服厚羽绒服和大衣在家不好清洗,不少人会选择送去干洗店,为了提高竞争力也提高服务水平,不少店铺提供干洗衣物上门取送的服务,而开发小程序,不仅能大大帮助干洗店 ...
微信小程序做一个调查问卷（二）
即将不定期的开放代码核心代码呈现源码下载在微信小程序如何展示富文本编辑器设置的内容多使用缓存技术,防止过多无效的访问题目分为单选题.多选题.简答题设置有其他选项,可进行手动输入选项多选题 ...
小程序做一个定位到当前城市，可选择的
点击的时候可选择, 代码: 其中样式是自己写的一个css,你们可以自己写样式,用到了阿里图标 index.wxml <view class="in ...
微信小程序做一个文档预览
文档预览首先展示效果 js页面 wxml页面首先展示效果图片预览: 视频预览 js页面首先在data中定义变量 itemId:null,saveTopList:[],//存储顶层文件列表fol ...

基于钉钉小程序做一个记事本

第一个页面

第二个页面

自定义组件

基于钉钉小程序做一个记事本相关推荐

最新文章

热门文章