对小程序研究感兴趣的可加（交流QQ群：604788754）入群联系群主可得到小程序教学资源。
这个案例只是想展示效果，内容部分未进行for循环绑定处理：
WXML:
<view class="maxbox"> <!--星期--> <view class="weekday"> <view class="weekday01">日</view> <view class="weekday01">一</view> <view class="weekday01">二</view> <view class="weekday01">三</view> <view class="weekday01">四</view> <view class="weekday01">五</view> <view class="weekday01">六</view> </view> <!---阳历阴历--> <view class="days"> <view class="days01"> <text>1</text> <text>初三</text> </view> <view class="days01"> <text>2</text> <text>初八</text> </view> <view class="days01"> <text>3</text> <text>初九</text> </view> <view class="days01"> <text>4</text> <text>初十</text> </view> <view class="days01"> <text>5</text> <text>十一</text> </view> <view class="days01"> <text>6</text> <text>十二</text> </view> <view class="days01"> <text>7</text> <text>十三</text> </view> <view class="days01"> <text>8</text> <text>初七</text> </view> </view> </view>
WXSS:
.maxbox{ width: 90%; height: auto; margin-left: 5%; display: flex; flex-direction: column; border: 1px #000 solid; } /*星期*/ .weekday{ width: 100%; height: 100rpx; line-height: 100rpx; background-color: #188eee; display: flex; flex-direction: row; color: #fff; } .weekday01{ width: 14.2%; height: 100%; text-align: center; } /*阳历阴历*/ .days{ width: 100%; height: auto; /*display: flex; flex-direction: row;*/ display: inline-block; } .days01{ width: 14.2%; height: 100rpx; display: flex; flex-direction: column; text-align: center; font-size: 16px; float: left; line-height: 40rpx; }
效果如下：
