微信小程序——页面中调用组件方法
我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法。
我们如何在调用组件的页面中调用组件里面的方法呢?
在调用组件的页面写如下代码:
onReady: function() {
this.popup = this.selectComponent("#popup"); //组件的id
},
showPopup(){
this.popup.showPopup(); //组件里里面定义的showPopup方法
},
hidePopup() {
this.popup.hidePopup(); //组件里里面定义的hidePopup方法
},
对上面的代码做个简易说明:
先看下效果图:

对应代码截图:
1.调用页面(Page/.../index.wxml)

2.组件页面(compoents/popup/index.js):

推荐2篇写的不错的博文,可以看看:
【微信小程序】自定义组件
小程序自定义组件的具体实现+页面与自定义组件间的通信
微信小程序——页面中调用组件方法的更多相关文章
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!
在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
- 在微信小程序页面间传递数据总结
在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...
- 微信小程序-页面跳转与参数传递
QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...
- [转] 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- 全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...
随机推荐
- php分享二十:mysql优化
1:垂直分割 示例一:在Users表中有一个字段是家庭地址,这个字段是可选字段,相比起,而且你在数据库操作的时候除了个人信息外,你并不需要经常读取或是改写这个字段.那么,为什么不把他放到另外一张表中呢 ...
- Vue(二):调试神器vue-devtools安装和使用
前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装 1.chrome商店直 ...
- Spring Security教程(四):自定义登录页
在前面的例子中,登陆页面都是用的Spring Security自己提供的,这明显不符合实际开发场景,同时也没有退出和注销按钮,因此在每次测试的时候都要通过关闭浏览器来注销达到清除session的效果. ...
- java正则表达式:验证字符串数字
正则表达式:^([0-9]+)$ -> ^:匹配以0-9开头,[0-9]:匹配0-9数字,+:匹配至少一个数字,$:匹配以数字结尾 /** *正则表达式:验证字符串数字 *两种方式: *1.pa ...
- PhotoShop CS6学习笔记
学习目的是能够处理正常的数码照片,稍作修饰即可.高级功能不做要求.但笔记还是要做的,以后翻翻可以加深记忆. 对于平面设计来说,软件是基础,创意是灵魂. 1. 位图与矢量图 位图,又称为点阵图像或绘制图 ...
- [javase学习笔记]-8.6 静态的内存载入
之前几节我们一直在说statickeyword所修饰的静态,那么在程序执行时,内存中static是怎样体现的呢?这一节我们就来看一看. 我们还是先看一个样例.希望我们通过对这个样例的分析让我们刚開始学 ...
- 谷歌IP地址
http://www.yuxiaoxi.com/2014-06-11-google-meet-you.html
- 【Unity】4.2 提升开发效率的捷径--导入 Unity 5.3.4 自带的资源包
分类:Unity.C#.VS2015 创建日期:2016-04-06 一.简介 Unity自带的资源包也称为标准资源包.换言之,Unity自带的所有标准资源包导入到Unity项目中以后,都会放在Pro ...
- nginx、Apache、Lighttpd启用HSTS
302跳转 通常情况下,我们将用户的 HTTP 请求 302 跳转到 HTTPS,这会存在两个问题: 不够安全,302 跳转会暴露用户访问站点,也容易被劫持 拖慢访问速度,302 跳转需要一个 RTT ...
- Android-一只手指滑动View,另一只手指按Home键,重新进入后View状态无法更新的问题
上午测试报了一个bug:说是一只手指拖动虚拟摇杆上的View滑块不松,另一只手指点击Home键将App压后台,重新进入的时候,View滑块卡死了. 刚开始看到这个问题感觉很奇怪,因为正常情况下,手指离 ...