微信小程序项目实例——备忘录

这篇具有很好参考价值的文章主要介绍了微信小程序项目实例——备忘录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序项目实例——备忘录

项目代码见文字底部,点赞关注有惊喜


一、项目展示

微信小程序项目实例——备忘录

二、项目介绍

项目是一个备忘录,拥有记录文字、计时和提醒的基本功能

项目只有一个页面,整体简约便捷

用户可以输入相关事件,并设立时间,便可完成备忘

当完成或未按期完成时,可以自行确认或删除

三、核心代码

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="header">    
    欢迎<text class="userinfo-nickname">{{userInfo.nickName}}</text>使用
  </view>
<form bindsubmit="formSubmit" bindreset="formReset">
 <view class="input-wrap">    
      <input type="text" value='{{curIpt}}' returnKeyType='send' placeholder="请输入待做的事" class="ipt-main"  bindinput='iptChange' />     
      <view class="flex-row flex-time" wx:if="{{curIpt}}">
            <picker range='{{curRange}}' value='{{curBegin}}' bindchange='beginChange'  class="pick-time time">
                <text>
                    开始时间:{{curRange[curBegin]}}
                </text>
            </picker>  
            <picker range='{{curRange}}' value='{{curFinish}}' bindchange='finishChange'  class="pick-time time">
                <text>
                    结束时间:{{curRange[curFinish]}}
                </text>
            </picker>  
            <label class="time"><switch class="switch" checked bindchange="switch1Change" />提醒</label>
        </view>
        <view class="flex-row" wx:if="{{curIpt}}">        
          <button class="btn btn-submit" formType="submit" hover-class="btn-hover">提交</button>
          <button class="btn btn-cancel" formType="reset">清空</button>
       </view>
  </view>
  </form>
  <view class="list-wrap" wx:if="{{lists.length>0}}">
    <view wx:for="{{lists}}" wx:if="{{showAll ||(!showAll && !item.done)}}" id="{{item.id}}" class="{{item.done?'done list':'list'}}">        
        <text>{{index+1}}:</text>
        <text data-id ="{{index}}"  class="cnt" bindtap="toChange" >{{item.content}}</text>
        <view hidden="{{!item.editing}}" class="edit-wrap">
            <input class="ipt-edit" value="{{item.content}}"  data-id="{{index}}" bindinput='iptEdit' />
            <button class="btn btn-edit" data-id="{{index}}" bindtap="saveEdit">修改</button>
        </view>
        
        <text class="time"> {{item.beginTime}}-{{item.finishTime}}</text>
        <icon class="ico-done" bindtap="setDone" data-id="{{index}}" type="success_no_circle" size='18' color="{{item.done?'#d7d7d7':'#6fa6cf'}}" />
        <icon class="ico-delete" bindtap="toDelete" data-id="{{index}}" type='cancel' size='20' color="#6fa6cf" />
    </view>
    <view class="footer">
        <view class="ft-area">
            <text>{{lists.length}}</text>
        </view>
         <view class="ft-area ft-mid">
            <text wx:if="{{showAll}}" bindtap="showUnfinished" class="ft-action">显示未完成</text>
            <text wx:else bindtap="showAll" class="ft-action">显示全部</text>
        </view>
        <view class="ft-area">
            <text bindtap="doneAll" class="ft-action">全部完成</text>
            <text bindtap="deleteAll" class="ft-action">全删</text>
        </view>
    </view>
  </view>
  <view class="input-wrap mt" wx:if="{{lists.length>0}}">
    <button class="btn btn-save" bindtap="saveData">保存数据</button>
  </view>
</view>
 

项目已上传,点击下载(关注可私聊拿代码)
点击下载!!!

微信小程序项目实例——备忘录文章来源地址https://www.toymoban.com/news/detail-504137.html

到了这里,关于微信小程序项目实例——备忘录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何把手机备忘录里的图片传送给微信

    手机备忘录的类型有很多。不同的手机备忘录应用,功能也个不一样,比如一些功能强大的备忘录应用,不仅可以添加图片,将备忘录图片同步储存到云端空间中,还能将备忘录里的图片直接发到微信上。那如何把手机备忘录里的图片传送到微信呢?这里就以敬业签备忘录为

    2024年02月13日
    浏览(37)
  • Vue:Vue项目中的Cesium配置备忘录

    作者:CSDN @ _乐多_ 本文记录了 Vue 项目中配置 Cesium 相关过程和细节。 一、安装Cesium 在node_modules中找到Cesium,将其中的Cesium文件夹复制到public中。 二、配置 index.html 主要加入这两行, 整个 index.html 如下, 声明: 本人作为一名作者,非常重视自己的作品和知识产权。在此声

    2024年02月06日
    浏览(34)
  • Postgresql源码(110)分析dsm动态共享内存分配与共享内存mq实例(dsm/toc接口备忘录)

    相关 《Postgresql源码(90)共享内存申请CreateSharedMemoryAndSemaphores》 《Linux内存映射函数mmap与匿名内存块》 《Linux共享内存与子进程继承》 用dsm框架的流程 评估共享内存大小:多次用shm_toc_estimate_chunk、shm_toc_estimate_keys向estimate中增加数据结构,最后用shm_toc_estimate得出刚才增加

    2024年02月14日
    浏览(63)
  • Android 备忘录,记事本程序设计

    android备忘录实现,使用ObjectBox数据库框架进行数据存储,增删改查等操作。代码使用kotlin编写。 1、下面看看ObjectBox数据库封装 需要注意的是:    /**      * 你只有配置好之后, 点击 Make Model \\\'你的model名字\\\', 才会创建 MyObjectBox对象      * 对于MyObjectBox的包名, 目前我发现的

    2024年01月23日
    浏览(48)
  • 基于uniapp+unicloud开发的手机备忘录小程序

    注:该小程序是我的一个课设作品,现在发出来供大家学习参考,如有不好的地方,欢迎指正。 1、注册账号 在unicloud官网注册一个账号:https://unicloud.dcloud.net.cn/login 2、创建云空间: 点击右上角创建云空间; 本小程序的云空间名字为:memo,默认选择阿里云即可。 3、登录

    2024年02月09日
    浏览(43)
  • Java程序员的MacBookPro(14寸M1)配置备忘录

    这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 欣宸的月俸虽然很低,但还是咬着牙攒够银子,入手了最低配置的MacBook Pro 14(M1芯片,刘海屏,丐版),经过一段时间折腾,终于可以用来写代码和博客了,这里将设置过程记录下来作个备忘,主要

    2024年02月14日
    浏览(55)
  • WPF实战项目十三(API篇):备忘录功能api接口、优化待办事项api接口

    1、新建MenoDto.cs 2、添加映射关系 3、新建服务接口IMemoService 4、新建服务MemoService 5、新增MemoController控制器 6、在program.cs添加服务 7、F5运行项目      8、针对查询数据可以做个优化,增加查询的页数、内容、数据量等,新建查询参数类    9、在IToDoService.cs和IMemoService.cs中添

    2024年02月11日
    浏览(39)
  • 手机备忘录怎么设置提醒 备忘录提醒设置方法

    具备提醒功能的手机备忘录有很多,比如云便签的提醒功能十分好用,不仅可设置单次定时提醒,还能添加重复提醒、重要事项提醒或到期延时提醒等,而且提醒方式也支持应用、微信、短信、电话、邮箱及手机系统日历等多种。那这款手机备忘录怎么设置提醒?备忘录提醒

    2024年02月12日
    浏览(41)
  • 手机备忘录如何批量导出来,备忘录整体导出方法介绍

    手机备忘录如何批量导出来?一些品牌的手机上有自带的备忘录,大多手机自带备忘录都不支持直接批量导出,只能通过分享或复制类的功能逐条导出,手动进行整理。 除了手机自带备忘录,一些朋友会选择在自己的手机上使用云便签备忘录,不仅可以在线添加备忘录提醒事

    2024年02月16日
    浏览(49)
  • 苹果备忘录如何转移?备忘录怎么转移到新手机?

    对于很多苹果手机的用户而言,想必都有使用备忘录的习惯吧?但是,经过长期的使用,当需要更换手机设备时,您考虑过如何转移这些记录吗? 苹果备忘录怎么转移到新手机? 如您使用的是苹果手机内置的备忘录,并且需要更换的新设备依然是苹果手机,其解决方案非常

    2024年02月13日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包