iView的Card卡片组件相关

1. 增加Card卡片后的高度渲染问题

Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM。this.$nextTick()官方介绍:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

下面的fee-card片是通过v-for循环遍历this.arrCard得到的,通过Button按钮的add方法对this.arrCard增加一个新对象来增添卡片数量。
每次增加后要求滚动条处于页面最下侧。
不用$nextTick 的情况下,每次push完obj后,dom2.scrollHeight得到值是push前的高度,猜测可能是页面未渲染前就拿值了。
使用 $nextTick 后,dom2.scrollHeight得到值是push后的高度。

<fee-card v-for="(card,index) in arrCard"
          :key="card.markId"
          :formItem="card"
          :index="index"
          @delArrCard="delArrCard">
</fee-card>
<Button type="primary"
        long
        @click="addCard">
  <Icon type="md-add"
        size="10" />
</Button>
addCard () {
  this.markNum--
  // let obj = { id: this.markNum, name: '', select: 0, rate: 0, day: 0, money: 0 }
  let obj = {
    markId: this.markNum, // 新增标记
    iFeeId: 0, // 主表
    iPrcId: 0, // 子表
    iEntId: this.$user.entId, // 主体id
    cFeeName: '', // 收费项目名称
    iFeePd: 0, // 收费周期
    iProdId: this.prodId, // 产品
    nPrcStd: 0, // 最低标准、
    nFrstRate: 0, // 首付比例、
    iMinTerm: 0 // 最小合同周期
  }
  this.arrCard.push(obj)

  let dom1 = document.querySelector('#drawerModel1')
  let dom2 = dom1.querySelectorAll('.ivu-drawer-body')[0]
  this.$nextTick(function () {
    dom2.scrollTop = dom2.scrollHeight
  })
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值