用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发-模仿“优优老师”课程日历

天下雪 2017-2-7 00:03

作者:百家晓东,来自原文地址模仿“优优老师APP”的课程日历实现的Demo,只显示当月 和下个月两个月的日期,会根据不同类型的日期类型显示不一样的样式,在wx-swiper组件中动态添加了datePad,会根据要显示月份的日 ...

作者:百家晓东,来自原文地址 
模仿“优优老师APP”的课程日历实现的Demo,只显示<当月> 和<下个月>两个月的日期,会根据不同类型的日期类型显示不一样的样式,在wx-swiper组件中动态添加了datePad,会根据要显示月份的日期动态确定日期表格是4,5,还是6行,并动态改变swiper的高度,本月的第一天默认选中状态,下个月的第一天默认是选中状态。 
[效果展示]

[目录结构]

img:本地icon文件文件夹 
course:课程日历代码的目录 
utils:工具类文件夹 
app.*:微信小程序全局配置文件

[贴代码] 
course.wxml

  1. <view class="container" style="background:#fff">
  2. <view class="container-hang" style="margin-top:23rpx;width:auto">
  3. <text wx:for="{{dateTitles}}" wx:for-item="dateItem" class="cellDate"
  4. style="width:{{titleCellWidth}}px;padding:6rpx 0 6rpx 0">{{dateItem}}</text>
  5. </view>
  6. <swiper bindchange="swiperChange" class="swipter-box" duration="300" style="height:{{swiperHeight}}rpx">
  7. <swiper-item wx:for="{{monthDatas}}" wx:for-item="monthData">
  8. <view class="cell-box" wx:for="{{monthData.dataHarr}}" wx:for-index="i">
  9. <view wx:for="{{[0, 1, 2, 3, 4, 5, 6]}}" wx:for-index="j">
  10. <view class="contentDate" style="width:{{dateCellWidth}}px;height:{{dateCellHeight}}rpx">
  11. <view class="type_no_1_pad" wx:if="{{monthData.data[i*7 + j].type == -1}}">
  12. <text class="type_no_1">{{monthData.data[i*7 + j].dateShow}}</text>
  13. </view>
  14. <view class="type_1_pad" wx:if="{{monthData.data[i*7 + j].type == 1}}">
  15. <text class="type_1">{{monthData.data[i*7 + j].dateShow}}</text>
  16. </view>
  17. <view class="type_2_pad" wx:if="{{monthData.data[i*7 + j].type == 2}}">
  18. <text class="type_2">{{monthData.data[i*7 + j].dateShow}}</text>
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </swiper-item>
  24. </swiper>
  25. <text style="width:{{windowWidth}}px;height:2rpx;background-color:#bdbdbd" />
  26. <view style="display:flex;flex-direction:column;background:#fff;margin-top:53rpx;align-items:center">
  27. <image src="{{noclass_icon}}" style="width:105rpx;height:105rpx" />
  28. <text style="color:#d9d9d9;font-size:33rpx;margin-top:21rpx">今天没有课程哦~</text>
  29. </view>
  30. </view>

course.js:

  1. var app = getApp()
  2. var dateUtils = require("../../utils/dateUtils.js")
  3. Page({
  4. data : {
  5. dateTitles : [
  6. "一", "二", "三", "四", "五", "六", "日"
  7. ],
  8. windowWidth : 0,
  9. windowHeight : 0,
  10. titleCellWidth : 0,
  11. titleCellHeight : 60, // rpx
  12. dateCellWidth : 0,
  13. dateCellHeight : 120, // rpx
  14. monthDatas: [],
  15. swiperHeight :0,
  16. noclass_icon : "../../img/noclass_icon.png",
  17. },
  18. onLoad: function(){
  19. var that = this
  20. wx.getSystemInfo({
  21. success: function(res) {
  22. that.setData({
  23. windowWidth : res.windowWidth,
  24. windowHeight : res.windowHeight,
  25. titleCellWidth : res.windowWidth/7 -1.1,
  26. dateCellWidth : res.windowWidth/7 -1.1
  27. })
  28. }
  29. })
  30. var tmp = getInitDate()
  31. that.setData({
  32. monthDatas : tmp,
  33. swiperHeight : tmp[0].dataHarr.length * 122
  34. })
  35. },
  36. swiperChange: function(e){
  37. var page = e.detail.current
  38. this.setData({
  39. swiperHeight : this.data.monthDatas[page].dataHarr.length * 122
  40. })
  41. }
  42. })
  43. function getInitDate(){
  44. var arr = []
  45. var offset = 0 // 测试用
  46. arr赞赏
    鲜花
    鲜花
    鸡蛋
    鸡蛋
    分享至 : QQ空间
    收藏
    原作者: 百家晓东 来自: 原文地址

    相关阅读