微信小程序实现的日期午别医生排班表功能示例(2)

<!-- 医生排班表 --> <scroll-view scroll-x="true"> <view> <view> <view> <view></view> </view> <block wx:for="{{dateArray}}" wx:key=""> <view> <view>{{item.weekName}}</view> <view>{{item.date_text}}</view> </view> </block> </view> <block wx:for="{{noonList}}" wx:key="" wx:for-index="parentIndex" wx:if='{{item.Value}}'> <view> <!--上午下午晚上全天--> <view> <view>{{item.NoonName}}</view> </view> <block wx:key="" wx:for="{{item.list}}" wx:for-item="trade" wx:for-index="ind"> <view wx:if='{{trade.keyue}}'> <view bindtap='clickDoctor' data-item='{{parentIndex}}' data-itemchild='{{ind}}'>{{trade.count+"https://www.jb51.net/"+trade.total}}</view> </view> <view wx:else> <view></view> </view> </block> </view> </block> </view> </scroll-view>

4.wxss

/*医生排班表 */ .cell-table { display: inline-flex; flex-direction: column; border: 1rpx solid #e5e5e5; border-bottom: 0; } .scrollClass { display: flex; width: 100%; white-space: nowrap; margin-top: 23px; height: 100%; background-color: white; } .cell-table_header { display: inline-flex; } .th { display: flex; flex-direction: column; width: 100px; height: 45px; background: #f8f8f8; border-right: 1rpx solid #e5e5e5; border-bottom: 1rpx solid #e5e5e5; justify-content: center; align-items: center; overflow-x: auto; } .th:first-child { width: 60px; } .cell_label { font-size: 13px; color: #999; } .cell_date_label { font-size: 12px; color: #999; } .cell-table_main { display: inline-flex; flex-direction: row; } .right-item { display: flex; flex-direction: row; } .td { display: flex; flex-direction: column; width: 100px; height: 45px; background: white; justify-content: center; align-items: center; border: 1rpx solid #e5e5e5; border-top: 0; border-left: 0; } .td:first-child { width: 60px; } .cell-table_empty { display: flex; justify-content: center; align-items: center; height: 45px; font-size: 15px; color: rgba(55, 134, 244, 1); width: 100%; word-break: normal; } .cell-table_choose { display: flex; justify-content: center; align-items: center; height: 45px; font-size: 15px; background: linear-gradient(to bottom, #5acafe, #45a1fc); color: white; width: 100%; word-break: normal; }

效果:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/2f627d08eb8729b3db88d21234b8406c.html