微信小程序如何在 wx：for 中判断页面跳转
335
2023-11-07
微信小程序开发之实现心情记事本
−目录一、项目展示二、首页三、效果图
一、项目展示
心情记事本是一款可以记录当前心情和生活的记事本
用户可以选择当前的心情（开心、平淡、伤心）和表情
并结合自己想要描述的文字
就可以记录当前的心情了
为了更好的展现用户的心情
项目罗列了大量的精美表情
缩略图如下：
项目的展示图如下：
二、首页
首页主要由日历组件和自制的记录组件结合而成
主要代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<view class="container">
<view class="title">
<view class="left-arrow" bindtap="prev_month"> <image src="/asset/images/left-arrow.svg" class="arrow"></image> </view>
<picker mode="date" value="{{date}}" fields="month" start="{{start_date}}" end="{{end_date}}" bindchange="select_date">
<view class="date-picker"> {{now_date}} </view>
</picker>
<view class="right-arrow" bindtap="next_month"> <image src="/asset/images/right-arrow.svg" class="arrow"></image> </view>
</view>
<view class="divider-box">
<image src="/asset/images/divider.svg" class="divider"></image>
</view>
<view class="calender">
<view class="calender-header">
<image src="/asset/images/SUN.svg" class="week-item"></image>
<image src="/asset/images/MON.svg" class="week-item"></image>
<image src="/asset/images/TUE.svg" class="week-item"></image>
<image src="/asset/images/WED.svg" class="week-item"></image>
<image src="/asset/images/THU.svg" class="week-item"></image>
<image src="/asset/images/FRI.svg" class="week-item"></image>
<image src="/asset/images/SAT.svg" class="week-item"></image>
</view>
<view class="calender-body">
<block wx:for="{{ date_arr }}" wx:key="key">
<view class="date-item date-enabled-{{item.enabled}} date-today-{{item.today}} ">
<span>{{item.date}}</span>
<block wx:if="{{item.emotion_value}}">
<image src="/asset/images/circle-{{item.emotion_value}}.svg" class="circle"></image>
</block>
</view>
</block>
</view>
</view>
<view class="diary">
<view wx:for="{{ items }}" wx:key="{{key}}">
<view class="diary-item" key="{{key}}" bindtap="detail" data-key="{{ item.key }}">
<view class="diary-date">
<view class="date">{{ item.value[date]}}</view>
<view class="day">{{ item.value[week]}}</view>
</view>
<image src="/asset/images/virtical-divider.svg" class="virtical-divider"></image>
<view class="emoji">
<image src="/asset/emojis/{{ item.value[emoji_type]}}.svg" class="emoji-image"></image>
</view>
<image src="/asset/images/virtical-divider.svg" class="virtical-divider"></image>
<view class="text">{{ item.value[text] }}</view>
<image class="more-arrow" src="/asset/images/more-arrow.svg"></image>
</view>
</view>
</view>
</view>
<image src="/asset/images/add-button.svg" class="add-button" bindtap="blank_modal"></image>
<view class="cover" wx:if="{{modal_visiable}}" bindtap="cancle"></view>
<view class="modal ripple bounceInDown" wx:if="{{modal_visiable}}">
<view class="create-box">
<image src="/asset/images/close-button.svg" class="close-button" bindtap="cancle"></image>
<image src="/asset/emojis/{{ emoji_indicator }}.svg" class="emoji-image"></image>
<view class="emoji-select-box">
<picker-view indicator-style="height: 50px;" value="{{ emoji_defaul_value }}" class="emoji-picker" bindchange="select_emoji">
<picker-view-column>
<view style="line-height: 50px; color: #797979">伤心的表情</view>
<view style="line-height: 50px; color: #797979">开心的表情</view>
<view style="line-height: 50px; color: #797979">平淡的表情</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{ emoji_list }}" wx:key="key">
<image src="/asset/emojis/{{ item }}.svg" style="height: 100%; width: 100rpx;"></image>
</view>
</picker-view-column>
</picker-view>
</view>
<block wx:if="{{ is_newbee }}">
<textarea placeholder="选择表达今天心情的emoji, 或者在此写点文字, enjoy ~ ~" value="{{ text }}" bindinput="input" placeholder-style="color:#9B9B9B;font-size:26rpx;line-height:46rpx" class="text"/>
</block>
<block wx:else>
<textarea placeholder="写点什么,当然你也可以什么都不写" value="{{ text }}" bindinput="input" placeholder-style="color:#9B9B9B;font-size:26rpx;" class="text"/>
</block>
<view class="button-box">
<block wx:if="{{ delete_button_visiable}}">
<view class="delete-button" bindtap="delete" style="visibility: show">删除</view>
</block>
<block wx:else>
<view class="delete-button" bindtap="delete" style="visibility: hidden">删除</view>
</block>
<view class="submit-button" bindtap="save">保存</view>
</view>
</view>
</view>
三、效果图
具体的效果展示如下
到此这篇关于微信小程序开发之实现心情记事本的文章就介绍到这了,更多相关小程序心情记事本内容请搜
您可能感兴趣的文章:微信小程序开发之实现食堂点餐系统微信小程序开发之实现记账本微信小程序组件化开发的实战步骤微信小程序开发WXML模板语法基础教程微信小程序云开发实现分页刷新获取数据微信小程序开发中组件的生命周期详细介绍微信小程序开发之实现一个跑步小程序微信小程序开发中所碰到问题集锦
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~