對小程序研究感興趣的可加(交流QQ羣:604788754)入羣聯繫羣主可獲得小程序教學資源。小程序
這個案例只是想展現效果,內容部分未進行for循環綁定處理:flex
WXML:spa
<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:code
.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; }
效果以下:blog