找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

微信小程序日历组件开发,图片失真的解决方案

作者:模板之家 2018-4-16 10:51 1223人关注

分享者:AaronW 效果图: 由于微信小程序特性的限制,js文件不能直接操作wxml文件,即不能进行dom操作,所以在此创建组件必须先把组件结构定义好,即在wxml文件中先定义好组件结构,

 

分享者:AaronW 
效果图: 

由于微信小程序特性的限制,js文件不能直接操作wxml文件,即不能进行dom操作,所以在此创建组件必须先把组件结构定义好,即在wxml文件中先定义好组件结构,然后再绑定数据,根据js文件中的数据进行动态渲染。这里的日历由两部分组成,一是上部红色,而是下面主要日历部分。上部直接绑定数据。 
下部分实现方式: 
第一行星期的显示,此处为固定显示,无需js操作。然后下面的日历body部分,由于每周七天,绑定的数据可根据此生成,根据当前日期生成每行的数据。 
日期生成: 
取当前月第一天,得到星期,计算上月在第一行的日期,如下图红色框中的部分: 

 
以当前日期为例,本月一号位周六,当前月份可显示上个月6天;计算当前月(或指定月份)最后一天的星期天数,取得下个月可在本月显示日期。最后合并本月日期,并按每行七日排列,即可生成当前月分的日历数据。以下贴出代码: 
wxml代码:

 

				
  1. <view class="calendar" bindtap="tap">
  2. <view class="calendar-panel">
  3. <view class="day">{{canlender.date}}日</view>


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)