A页面跳转B页面,B页面中的自定义组件传值不能正确渲染
发布于 5 年前 作者 chaocai 15073 次浏览 来自 问答

A页面跳转B页面:

<view>

    <navigator url="/B">点击这里跳转详情</navigator>

</view>

B页面引入自定义组件:

<view style=“color:red;”>

    <theComponent shijianchuo="{{ secondDiff }}"></theComponent>

</view>

(B页面中的secondDiff是在B页面onLoad中调用接口之后传回的值)

第定义组件wxml:

<view>{{ theTime }}</view>

自定义组件js:

properties: {

    shijianchuo: String

},

data: {

    theTime: ‘’

},

attached:function(){

    const aaa = this.data.shijianchuo

    this.setData({

    theTime: this.format(aaa)

    })

},

methods: {

    //计算秒差

    format: function (time) {

        if (time < 60) {

            return time = “时间少于60秒”;

        } else {

            const minute = parseInt(time / 60);

            const hour = parseInt(time / 3600);

            const day = parseInt(time / 86400);

            if (minute > 60) {

                if (hour > 24) {

                    if (day > 3) {

                        return time = “3天前”

                    } else {

                        return time = `${day}天前`

                    }

                } else {

                    return time = `${hour}小时前`

                }

            } else {

                return time = `${minute}分钟前`

            }

        }

    }

}

出现问题:在B页面中,秒差未能计算

2 回复

从代码片段不能看出来你需要反馈的问题,麻烦详细描述一下

组件不支持动态传值的   改写了下

// components/theComponent.js

// components/theComponent.js

Component({

/**

  * 组件的属性列表

  */

properties: {

shijianchuo: String

},

/**

  * 组件的初始数据

  */

data: {

theTime: ‘’

},

attached:function(){

const aaa = this.data.shijianchuo;

//组件对象传给  page

let pages=getCurrentPages();

let page= pages[pages.length-1];

page.setData({ component:this })

var  that=this;

this.setData({

theTime: this.format(aaa)

})

},

/**

  * 组件的方法列表

  */

methods: {

//计算秒差

format: function (time) {

let  that =this;

if (time < 60) {

return time = “时间少于60秒”;

} else {

const minute = parseInt(time / 60);

const hour = parseInt(time / 3600);

const day = parseInt(time / 86400);

if (minute > 60) {

if (hour > 24) {

if (day > 3) {

return time = “3天前”

} else {

return time = `${day}天前`

}

} else {

return time = `${hour}小时前`

}

} else {

return time = `${minute}分钟前`

}

}

}

}

})

// detail/detail.js

import api from ‘…/api/api.js’

Page({

/**

  * 页面的初始数据

  */

data: {

secondDiff: ‘’

},

/**

  * 生命周期函数–监听页面加载

  */

onLoad: function (options) {

console.log(options.dynamicId)

const self=this;

console.log(self);

api.post(’/index/find/getdynamic_detail’,{

dynamicId: options.dynamicId

}).then((res)=>{

self.setData({

secondDiff: res.secondDiff

});

//设置组件值

self.data.component.setData({

theTime: self.data.component.format(res.secondDiff)

})

}).catch((err)=>{

console.log(err)

})

},

/**

  * 生命周期函数–监听页面初次渲染完成

  */

onReady: function () {

},

/**

  * 生命周期函数–监听页面显示

  */

onShow: function () {

},

/**

  * 生命周期函数–监听页面隐藏

  */

onHide: function () {

},

/**

  * 生命周期函数–监听页面卸载

  */

onUnload: function () {

},

/**

  * 页面相关事件处理函数–监听用户下拉动作

  */

onPullDownRefresh: function () {

},

/**

  * 页面上拉触底事件的处理函数

  */

onReachBottom: function () {

},

/**

  * 用户点击右上角分享

  */

onShareAppMessage: function () {

}

})

回到顶部