小程序如何封装自定义组件(Toast)
1、创建和pages 同级的component目录新建一个myToast目录 例如:
2、myToast.wxml文件内容:
<!-- 自定义toast组件 -->
<!-- name 模块名称 -->
<template name="toast" >
<!-- catchtouchmove=‘xxx’ 遮罩层的滚动穿透 -->
<!-- isHide 显示消失 -->
<view class="toast_content_box" wx:if="{{ isHide }}"
catchtouchmove="preventdefault">
<view class="toast_content">
<view class='toast_content_text'>
<!-- 内容 -->
{{content}}
</view>
</view>
</view>
</template>
3、myToast.wxss文件样式(根据自己ui样式去写):
.toast_content_box {
overflow: hidden;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: fixed;
z-index: 999;
background-color: rgba(0, 0, 0, 0.3)
}
.toast_content {
width: 50%;
padding: 30rpx;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 20rpx;
}
.toast_content_text {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
color: #fff;
font-size: 28rpx;
font-weight: 300;
}
4、myToast.js文件内容:
let _compData = {
'_toast_.isHide': false,// 控制组件显示隐藏
'_toast_.content': '',// 显示的内容
}
let toastPannel = {
// toast显示的方法
ShowToast: function (data) {
let self = this;
this.setData({ '_toast_.isHide': true, '_toast_.content': data });
},
// toast隐藏的方法
HideToast: function (data) {
let self = this;
self.setData({ '_toast_.isHide': false })
},
// toast显示的方法 2000后隐藏
ShowToastTime: function (data) {
let self = this;
this.setData({ '_toast_.isHide': true, '_toast_.content': data });
setTimeout(() => {
this.setData({ '_toast_.isHide': false, '_toast_.content': data });
}, 2000)
},
}
function ToastPannel() {
// 拿到当前页面对象
let pages = getCurrentPages();
let curPage = pages[pages.length - 1];
this.__page = curPage;
// 小程序最新版把原型链干掉了。。。换种写法
Object.assign(curPage, toastPannel);
// 附加到page上,方便访问
curPage.toastPannel = this;
// 把组件的数据合并到页面的data对象中
curPage.setData(_compData);
return this;
}
module.exports = {
ToastPannel
}
5、全局引入, 在项目中的app.js中将组件脚本引入供全局使用,引入方法:接收暴露出来的构造函数
6、 全局引入样式在app.wxss
7、在需要使用该组件的页面将模块引入:
8、在引入模块组件 同级的js中实例组件的构造函数:
!
9、点击按钮实现效果
组件比较简单、如果需求不同另行修改。
小程序如何封装自定义组件(Toast)的更多相关文章
- 小程序 模态对话框自定义组件(modal)
1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序中的自定义组件
微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...
- 手摸手教你微信小程序开发之自定义组件
前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...
- 微信小程序中的自定义组件(components)
其实小程序开发很像vue和react的结合,数据绑定和setData 重新渲染页面的数据,最近发现连写组件都是很像,也是醉了,自我认为哈, 因为小程序可以将页面内的功能模块抽象成自定义组件,以便在 ...
- 微信小程序中的自定义组件 以及 相关的坑
Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件, ...
- 原创:微信小程序如何使用自定义组件
本博文是通过实际开发中的一个实例来讲解自定义组件的使用. 第一步:新建自定义组件目录,如图,我新建了个componts和tabList目录,然后右键tabList目录选择新建compont取名为tab ...
- 小程序里的自定义组件:组件的外部样式externalClasses的使用
启用外部样式: 自定义组件: v-tag 在html 引入 在组件写外部样式的css : .ex-tag { background-color: #fffbdd ; } 在组件使用该外部的样式 这个时 ...
- 微信小程序 - radio/checkbox自定义组件
更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...
随机推荐
- 关于*.ashx 处理程序调试时 未能创建类型 错误
出现改问题的根本原因是因为,我更改过改类型的名字,而IDE并没有更改 ***.ashx. 注册类型名字. 所更改的类的名字应该是 "项目名字.文件名字“ 例如下图 应该更改类为 ”Wx_ ...
- Java作业三(2017-9-25)
/*程序员龚猛*/ 作业1 public class Variable_Demo$Long{ public static void main(String[]args { int i=3; long ...
- Selenium 3----警告框处理+下拉框选择
警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...
- 2018-2019-2 20175320实验二《Java面向对象程序设计》实验报告
2018-2019-2 20175320实验二<Java面向对象程序设计>实验报告 一.实验步骤及内容 (一)了解使用JUint,并对示例代码MyUtil进行测试 1.先在IDEA中安装J ...
- Python全栈-magedu-2018-笔记1
第一章 - Python 环境搭建 操作系统准备 准备Linux最小系统即可. 如果在虚拟机中克隆,MAC地址会变. 这里使用CentOS 6.5+ Pyenv 安装 安装git yum instal ...
- Java 非静态内部类中可以定义静态变量或方法吗?
如图: 这个问题的答案是不可以 由于内部类的实例化是由外部类实例化之后加载的,如果外部类还没有实例化,这时候调用内部类的静态成员,此时内部类还没有被加载,却要开始创建静态成员,这是矛盾的,所以java ...
- Yocto和Android编译命令的简化和自动完成的实现
简化编译命令 无论是在Android编译系统中,还是在Yocto编译系统中,要编译一个目标,输入命令都有点费事. Yocto系统: source setup-environment $FOLDER b ...
- Redis单机多节点集群实验
第一步:安装Redis 前面已经安装过了 不解释, Reids安装包里有个集群工具,要复制到/usr/local/bin里去 cp redis-3.2.9/src/redis-trib.rb /usr ...
- C# DataGridView改变行颜色无效问题
有一个需求是DataGridView中不符合要求的行变为红色,这网上查到的代码是 Row.DefaultCellStyle.BackColor = Color.Red;即可 但是写完之后发现不起作用 ...
- 一次完整的http请求过程
转载:https://blog.51cto.com/linux5588/1351007 当我们在浏览器的地址栏输入 www.linux178.com,然后回车,回车这一瞬间到看到页面到底发生了什么呢? ...