微信小程序-复杂组件的应用

复杂组件—日历组件的多页面不同应用解决方案

现状

• 已经封装完的日历组件且已经应用与多个页面(此时仅有一套组件方案)

需求

• 该日历组件要应用与其它页面(两个)但展示的效果和功能与原方案不同

冲突

• 应用该组件新方案的两个页面之间,一个需要初始化数据,一个不需要,存在冲突

难点:

• 难点一: 原来的日历组件使用的formatter,与现在页面使用的formatter不同
• 难点二: 选择的文字字段展示与原先不同
• 难点三: 可选择日期,选择之后不能在选择同一天(不可重叠)
• 难点三: 选择预约页面:一开始空,打开后点击任意日期,没有点击确定时,关闭弹窗,在打开弹窗后,原先选中的数据要保留,选中的那天日期,选中文本,上下午状态和确定按钮,都要保留被选中的状态,和可以确定的状态
• 难点四: 更改预约页面的弹窗: 一打开为预约的那个时间(不管当天且上下午状态是否已经约满),状态都为选中的状态,点击其它可选择日期,原先的预约时间约满的禁止不可选
• 难点五: 点击更改预约时间后,在点击其它时间,不确定,关掉弹窗,在点击弹窗,状态应默认为对应预约时间的选择状态

解决:

• 如果不确定的话,可以先把原组件中的formatter逻辑存放在一个空白处,然后开始写新方案的formatter,确保实现后把新方案formatter存起来,然后把原来的formatter还原.
• 然后把新方案的formatter写在页面中,通过组件传值的方式传给组件,组件初始化时通过this.data拿到数据后判断是否存在传过来的formatter,有就将这个新的传给formatter,无就用原先的formatter.(formatter在组件类型为null)
• 在页面中直接通过判断按钮是否选择和状态来判断上下午状态并且传给组件,组件接收后通过判断是否存在这一字段来将这一字段添加到原来的选择文本字段(原来 += 新的),需要监听文本字段的变化,日期仍然是this.data.的日期(选中日期)
• 在组件处理选择日期的函数中判断,如果是同一天就返回
• const calendarComponent = this.selectComponent(‘#calendar’)
• calendarComponent.reset()
• 在组件关闭弹窗处,不能初始化数据,再点开时要把需要拿到的状态获取到
• 在组件properties中的初始化时间函数要监听数据,重新获取已经处理的文本字段,日期仍然时预约那天(date)

checkbox样式问题

当伪类的三角形随着机型,位置浮动时,可在checkbox那添加overflow:hiddden

页面

<view>
  <checkbox 
    class="checkbox {{ isCheckAm && isAm === amType.MORNING ? 'is_checked_am' : '' }}" 
    value="{{ isAm === amType.MORNING }}" 
    mark:isAm="{{ amType.MORNING }}"
  >
    <i class="iconfont icon-checkgou tick"></i>
    <view class="car-subscribe-form-grid-view-daybtn">上午</view>
  </checkbox>
</view>

样式

checkbox {
	width: 200rpx;
	height: 88rpx;
	border-radius: 4rpx;
	border: 2rpx solid var(--border-line-color);
	margin-top: 24rpx;
	color: var(--text-1-color);
	background: var(--white);
}
checkbox::after {
  content: "";
  position: absolute;
  width: 0rpx;
  height: 0rpx;
  border-bottom: 60rpx solid var(--border-line-color);
  border-left: 60rpx solid transparent;
  margin-left: -47rpx;
  margin-top: 30rpx;
}
checkbox:first-child {
  margin-right: 22rpx;
  margin-left: 40rpx;
}
checkbox .wx-checkbox-input {
  border: none;
   height: 0;
  width: 0;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  /* checkbox 被选中后前面选项框的背景样式 */
  height: 0;
  width: 0;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width:0rpx;
  height:0rpx;
  font-size:0;
  color:#fff;
  background-color:#fff;
}
.is_checked_am{
  border: 2rpx solid var(--primary-color) !important;
}
.is_checked_am::after{
  content: "";
  width: 0rpx;
  height: 0rpx;
  position: absolute;
  border-bottom: 60rpx solid var(--primary-color);
  border-left: 60rpx solid transparent;
  margin-left: -47rpx;
  margin-top: 30rpx;
}
.icon-checkgou {
  position: absolute;
  padding-left: 157rpx;
  padding-top: 100rpx;
  color: white;
  z-index: 1000;
}
.tick {
  padding-top: 56rpx !important;
}
.car-subscribe-form-grid-view-daybtn {
  padding-left: 20rpx;
  padding-top: 24rpx;
  width: 160rpx;
  font-size: 26rpx;
  text-align: left;
  word-break: break-all;
  z-index: 50;
}

calendar的reset()

选中日历的某个日期，重置选中的日期到默认值