收藏
回答

自定义组件内部的值怎么反馈到外部

框架类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 自定义组件 工具 6.6.5 1.9.92

功能需要,写了一个自定义的倒计时组件,但是组件内部的值外部怎么获知(外面怎么知道倒计时到0了)

首先是自定义组件代码:

    html

<view class="inner">
  {{cuttonTime}}
</view>

css

.inner {
  color: #fff;
  font-size: 28rpx;
  line-height: 54rpx;
}

js

Component({
  properties: {
    innerText: {
      type: null,
      value: ''
    },
    timeText: {
      type: null,
      value: ''
    }
  },
  data: {
    cuttonTime: '',
    durTime: '',
    cuttonTimeOr:''
  },
  attached: function () {
    var that = this
    that.properties.timeText = that.data.durTime
    that.setData({
      durTime: parseInt(that.properties.innerText / 1000)
    })
    if (that.data.durTime <= 0) {
      that.setData({
        cuttonTime: '超时',
      })
    } else {
        that.sktime()
        that.data.cuttonTimeOr = setInterval(function () { that.sktime() }, 1000);
    }
  },
  detached:function(){
    clearInterval(this.data.cuttonTimeOr)
  },
  methods: {
    sktime: function () {
      var that = this
      var sdurTime = that.data.durTime
      if (!sdurTime) {
        return false
      } else {
        that.data.durTime--
        var h = parseInt(sdurTime / 3600);
        sdurTime %= 3600;
        var min = parseInt(sdurTime / 60);
        var sec = sdurTime % 60;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;
        that.setData({
          cuttonTime: min + ":" + sec
        })
        if (that.data.durTime <= 0) {
          that.setData({
            cuttonTime: '超时',
          })
          clearInterval(that.data.cuttonTimeOr)
        }
      }
    }
  }
})

引入页html

<view class="paying" bindtap='goplay' data-index="{{index}}">
    <span>付款</span>
    <time-compent inner-text="{{itemName.order.leftTime}}"></time-compent>
</view>

外部js怎么能获取到内部的这个不断变化的inner-text,谢谢

回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容