釘釘E應用(小程序)之日曆

嘮叨幾句：其實釘釘E應用的編寫相似支付寶小程序（畢竟是阿里爸爸下的產業），而支付寶小程序又是借鑑微信小程序（只不過人家是wxml / wxss ,他是 axml / acss罷了），這三者能夠說是同源了(大概)。只要熟悉微信小程序的，看着文檔開發釘釘E應用便木有什麼難度!!!

效果：

axml

<view class="page">
    <text class="toptip"> 顯示可選擇的天數：{{booklist_len}}天 </text>
    <view class='box1' style='width: {{ sysW * 7 }}rpx'>
        <view class='dateBox'>{{ year }} 年 {{ month}} 月 </view>
        <view class="weeklist">
            <block a:for='{{ weekArr }}'>
                <view key="{{item}}" style='width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;'> {{ item }} </view>
            </block>
        </view>
        <view class="daylist">
        </view>
        <block a:for='{{ arr }}'>
            <view class="isrela" key="{{item}}">
                <view style='{{ index == 0 ? "margin-left:" + sysW * marLet + "rpx;" : "" }}width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;' class='{{ item.isbook?"isbook":"nobook"}}'>{{ item.day }} </view>
                <view class='{{item.day == getDate ? "dateOn" : "" }}'>
                </view>
            </view>
        </block>
    </view>
</view>

 

js

Page({ data: { arr: [], sysW: null, lastDay: null, firstDay: null, weekArr: ['日', '一', '二', '三', '四', '五', '六'], year: null,
　　　　　//選中的日期,高亮顯示 booklist: ["1", "3", "10", "20", "23", "24", "25", "26"], booklist_len: '', }, //獲取日曆相關參數
    dataTime: function () { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); var months = date.getMonth() + 1; //獲取現今年/月/日/幾號/星期幾
        this.data.year = year; this.data.month = months; this.data.getDate = date.getDate(); var d = new Date(year, months, 0); this.data.lastDay = d.getDate(); let firstDay = new Date(year, month, 1); this.data.firstDay = firstDay.getDay(); }, onShow: function (options) { this.dataTime(); //先清空數組，根據獲得今月的最後一天日期遍歷 獲得全部日期
        if (this.data.arr) { this.data.arr = []; } for (var i = 0; i < this.data.lastDay; i++) { var obj = {}; obj.day = i + 1; this.data.arr.push(obj); for (var j = 0; j < this.data.booklist.length; j++) { if (this.data.arr[i].day == this.data.booklist[j]) { this.data.arr[i].isbook = 1 } } } var res = dd.getSystemInfoSync(); this.setData({ sysW: res.windowHeight / 6.5, marLet: this.data.firstDay, arr: this.data.arr, year: this.data.year, getDate: this.data.getDate, month: this.data.month, booklist_len: this.data.booklist.length }); }, });

 

acss

.toptip { font-size: 34rpx; color: #aaa;
} .box1 .dateBox { width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; margin-top: 40rpx; font-size: 50rpx; color: #282828;
} .box1 { display: flex; flex-wrap: wrap; margin: 0 auto;
} .box1>view { text-align: center; font-size: 34rpx;
} .isrela { position: relative;
} .weeklist { display: flex; justify-content: space-around; font-weight: bold; border-bottom: 1rpx solid #d0d0d0; color: #333;
} .dateOn { position: absolute; bottom: 10rpx; left: 50%; width: 10rpx; height: 10rpx; margin-left: -3rpx; border-radius: 50%; background-color: blue;
} .isbook { box-sizing: border-box; color: #3777b1; background-color: #9cbbd1; border: 1rpx solid #fff;
} .nobook { color: #555;
}

 注：轉載請標明出處...

原文出處：https://www.cnblogs.com/wunuolin/p/11227558.html