立即注册
 找回密码
 立即注册

梦幻岛

搜索
热搜: 活动 交友
返回列表
查看: 462|回复: 1

小程序自定义日历组件及数据交互

[复制链接]

35

主题

35

帖子

340

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
340
发表于 2019-6-25 11:25:51 | 显示全部楼层 |阅读模式
<p style="text-align: left;"><img src="http://img.domystery.com/Mys/M00/07/B7/cxwu3l0RkTuAHc8KAAFzMs9kdzw357.png" title="1561432379308601.png" alt="image.png"/></p><p style="text-align: left;">日历被做成组件,可以很方便的引用到小程序各个页面。但是每个页面的数据处理方式可能不同,这就需要组件处理基本的自身内容,样式,数据标准</p><p style="text-align: left;">传递方式:(父级页面引用组件的地方,写上绑定的事件,后边由组件触发传参)</p><p style="text-align: left;"><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">calendar</span> <span style="color: #9cdcfe;">currentYear</span>=<span style="color: #ce9178;">&#39;{{currentyear}}&#39;</span> <span style="color: #9cdcfe;">currentMonth</span>=<span style="color: #ce9178;">&quot;{{currentmonth}}&quot;</span> <span style="color: #9cdcfe;">assigndata</span>=<span style="color: #ce9178;">&quot;{{assigndata}}&quot;</span> <span style="color: #9cdcfe;">bind:dateclick</span>=<span style="color: #ce9178;">&#39;dateclick&#39;</span> <span style="color: #9cdcfe;">bind:sendObj</span>=<span style="color: #ce9178;">&#39;calendardata&#39;</span><span style="color: #808080;">&gt;&lt;/</span><span style="color: #569cd6;">calendar</span><span style="color: #808080;">&gt;</span></p><p style="text-align: left;"><span style="color: #808080;">示例:绑定了两个事件,一个是日期上的点击传日期,一个是上下月的数据传递</span></p><p style="text-align: left;"><span style="color: #808080;"><br style="text-align: left;"/></span></p><p style="text-align: left;"><span style="color: #808080;"><img src="http://img.domystery.com/Mys/M00/07/B7/cxwu3l0Rkl2AQbvyAAEtsL77bHY079.png" title="1561432669430909.png" alt="1561432669430909.png" width="900" height="444" border="0" vspace="0" style="width: 900px; height: 444px;"/></span></p><p style="text-align: left;"><span style="color: #808080;">日历组件的数据,样式自己看需要调整。这里调整了下节假日,有安排课程的日期,字体颜色标记有区分<br style="text-align: left;"/></span></p><p style="text-align: left;"><span style="color: #808080;"><br style="text-align: left;"/></span></p><p style="text-align: left;"><span style="color: #808080;"><img src="http://img.domystery.com/Mys/M00/07/B8/cxwu3l0RkrOAFbBSAABu6G1HpKQ357.png" title="1561432755527535.png" alt="image.png"/></span></p><p style="text-align: left;">切换月份,准备要传递的数据,</p><p style="text-align: left;"><span style="color: #569cd6;">this</span><span style="color: #dcdcdc;">.</span>triggerEvent<span style="color: #dcdcdc;">(</span><span style="color: #ce9178;">&#39;sendObj&#39;</span><span style="color: #dcdcdc;">,</span> sendObj<span style="color: #dcdcdc;">)</span></p><p style="text-align: left;">调用绑定父级的事件方法sendObj,并传递参数sendObj</p><p><br style="text-align: left;"/></p><p style="text-align: left;"><img src="http://img.domystery.com/Mys/M00/07/B8/cxwu3l0RksmAfonSAABDsMBA5Y0666.png" title="1561432777731110.png" alt="image.png"/></p><p style="text-align: left;">同理,点击日期的事件,传递日期参数给组件绑定的父级方法,调用父级dateclick,传参dateDetail</p><p style="text-align: left;"><img src="http://img.domystery.com/Mys/M00/07/B8/cxwu3l0Rk4uAF8FRAABpb9r907E911.png" title="1561432971595542.png" alt="image.png"/></p><p style="text-align: left;">示例:拿到月数据,调接口,处理课程数据,后边把数据set到组件里渲染页面</p><p style="text-align: left;"><img src="http://img.domystery.com/Mys/M00/07/B8/cxwu3l0Rk3iAK_i8AAB2yDQb5Nw504.png" title="1561432952348184.png" alt="1561432952348184.png" width="900" height="206" border="0" vspace="0" style="width: 900px; height: 206px;"/></p><p style="text-align: left;">示例:点击日期,获取当日课程内容,set组件渲染展示。</p><p><br style="text-align: left;"/></p><p style="text-align: left;">流程还有处理方法如上所述,大家可以发散下思维。</p><p><br style="text-align: left;"/></p><p style="text-align: left;">日历的组件demo论坛里有:<a href="http://dreamisland.wang/thread-7-1-1.html">http://dreamisland.wang/thread-7-1-1.html</a></p><p><br style="text-align: left;"/></p><p style="text-align: left;"><span style="color: rgb(68, 68, 68); font-family: &quot;microsoft yahei&quot;; font-size: 14px; background-color: rgb(255, 255, 255);">转载请注明来源:梦幻岛 dreamisland.wang</span></p>
回复

使用道具 举报

0

主题

9

帖子

26

积分

新手上路

Rank: 1

积分
26
发表于 2020-6-12 10:18:14 | 显示全部楼层
刚电饭锅破解欧派就爱上了个回来电话李洪彩票刚老师发过来金龙我圣诞节欧式奖品更加生动福彩双色球啤酒花说破大家和搜到交换机就偶手机搜酒叟奇偶还是节后见谁都接送偶幸运飞艇时候手机索赔和奖品搜的结合搜电话
回复

使用道具 举报

返回列表
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表