手揣网教程:绿色安全纯净官方版,体验当今速度最快的浏览器!

使用组件开发微信小程序日历的详细办法

时间:2024/4/3作者:未知来源:手揣网教程人气:

[摘要]摘要: 我们都知道由于微信小程序开发文档和工具的限制,js文件不能直接操作wxml文件,开发者不能进行dom操作,所以在此创建组件必须先把组件结构定义好!也就是说必须在wxml文件中先定义好组件结构...
摘要: 我们都知道由于微信小程序开发文档和工具的限制,js文件不能直接操作wxml文件,开发者不能进行dom操作,所以在此创建组件必须先把组件结构定义好!也就是说必须在wxml文件中先定义好组件结构,然后再绑定数据,根据j ...

我们都知道由于微信小程序开发文档和工具的限制,js文件不能直接操作wxml文件,开发者不能进行dom操作,所以在此创建组件必须先把组件结构定义好!也就是说必须在wxml文件中先定义好组件结构,然后再绑定数据,根据js文件中的数据进行动态渲染。

我们在开发日历小程序时(本站也曾经介绍过两篇小程序日历的源码demo,有兴趣的朋友可以了解下:
一款非常NB的日历转换器(阳历-农历)的微信小程序源码demo 和微信小程序:日历demo下载)就会发现,这里的日历由两部分组成,一是上部红色,而是下面主要日历部分。上部直接绑定数据。
下部分实现方式:
第一行星期的显示,此处为固定显示,无需js操作。然后下面的日历body部分,由于每周七天,绑定的数据可根据此生成,根据当前日期生成每行的数据。
日期生成:
取当前月第一天,得到星期,计算上月在第一行的日期,如下图红色框中的部分:


使用组件开发微信小程序日历的详细办法
以当前日期为例,本月一号位周六,当前月份可显示上个月6天;计算当前月(或指定月份)最后一天的星期天数,取得下个月可在本月显示日期。最后合并本月日期,并按每行七日排列,即可生成当前月分的日历数据。以下贴出代码:
wxml代码:
<view class="calendar" bindtap="tap">
    <view class="calendar-panel">
        <view class="day">{{canlender.date}}日</view>
        <view class="month">{{canlender.month}}月</view>
    </view>
    <view class="calendar-header">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <view class="calendar-body">
        <block wx:for="{{canlender.weeks}}" wx:for-item="weeks">
            <view class="calender-body-date-week">
                <block wx:for="{{weeks}}" wx:for-item="day">
                    <view class="date {{canlender.month == day.month? '' : 'placeholder'}} {{day.date==canlender.date?'date-current': ''}}">{{day.date}}</view>
                </block>
            </view>
        </block>
    </view>
</view>js代码:
<view class="calendar" bindtap="tap">
    <view class="calendar-panel">
        <view class="day">{{canlender.date}}日</view>
        <view class="month">{{canlender.month}}月</view>
    </view>
    <view class="calendar-header">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <view class="calendar-body">
        <block wx:for="{{canlender.weeks}}" wx:for-item="weeks">
            <view class="calender-body-date-week">
                <block wx:for="{{weeks}}" wx:for-item="day">
                    <view class="date {{canlender.month == day.month? '' : 'placeholder'}} {{day.date==canlender.date?'date-current': ''}}">{{day.date}}</view>
                </block>
            </view>
        </block>
    </view>
</view>

以上就是利用组件开发微信小程序日历的详细方法的详细内容,更多请关注php中文网其它相关文章!


小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。



关键词:运用组件开发微信小程序日历的详细办法




Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版