微信小程序> 如何在小程序页面上,更新被调用组件上的元素或标记的数据

如何在小程序页面上,更新被调用组件上的元素或标记的数据

浏览量:2925 时间: 来源:weixin_44019016

相信大家组件都已经用过了。

 

也大概了解了他们的通讯方式。

 

但是,如果我们要在页面上动态的更新 页面上的组件显示的内容,该怎么办?

 

以下演示给大家看。

 

首先我有以下:

 

组件A wxml:

<view class='navbarCon acea-row row-center-wrapper' wx:if='{{parameter.navbar==1}}'>

<view class='name {{parameter.color==true?"on":""}} line1'>{{parameter.title}}</view>

<view class='iconfont icon-xiangzuo {{parameter.color==true?"on":""}}' wx:if='{{parameter.return==1}}' bindtap='return'></view>

 

组件A JS建立此方法:

 

setTitle: function (title) {

this.setData({

 

'parameter.title': title//byrick 2019-8-28

})

}

 

以上方法用于更新组件WXML里的 title

 

然后后我们看看主页面的调用:

 

页面B wxml:

<navbar parameter='{{parameter}}' id='navbar'></navbar>

 

页页B JS

初始化的调用:

 

Page({

 

/**

* 页面的初始数据

*/

data: {

parameter: {

'navbar': '1',

'return': '1',

'title': '商品详情',

'color': true,

'class': '0'

},

 

 

动态的调用:

 

that.selectComponent('#navbar').setTitle(storeInfo.store_name);

 

至此,我们就完成了 页面B 更新组件WXML里的数据。

 

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎