小程序如何封装自定义组件(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取值不存在红色提示和 ...
随机推荐
- git删除掉已经保存的用户名密码
以保存的用户名密码删除,先找到变量存在的位置: git config -l To help track down the setting, I'd try to use: git config --l ...
- vue PC端项目中解决userinfo问题
在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...
- three.js 加入纹理(texture)的方法及注意事项
var texture = new THREE.TextureLoader().load( './img/1.png' ); var box_show = new THREE.CubeGeometry ...
- rbac权限控制,基于无线分类
2018年9月18日11:21:28 数据库结构 CREATE TABLE `admin` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `c ...
- 通过mycat实现mysql的读写分离
mysql的主从配置沿用上一篇博客的配置:https://www.cnblogs.com/MasterSword/p/9434169.html mycat下载地址:http://www.mycat.i ...
- 随笔二-https://www.cnblogs.com/shang1680/p/9657994.html
作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址:https://github.com/ ...
- 20165311 《网络对抗技术》 Kali安装
一.目的要求 下载 安装 网络 共享 软件源 二.主要步骤 从官网下载软件安装包 安装的比较顺利 具体截图就不放上来了 安装结果图: 网络配置和共享文件夹设置 网络配置: 由于我之前安装虚拟机,所以并 ...
- linux中启动 java -jar 后台运行程序
直接用java -jar xxx.jar,当退出或关闭shell时,程序就会停止掉.以下方法可让jar运行后一直在后台运行. 1. java -jar xxx.jar & 说明: 在末尾加入 ...
- Python 学习笔记8 循环语句 while
While循环是哟中利用条件语句,不断的执行某一段代码块,达到批量操作输出等一系列的操作,直到条件不满足或者被强制退出为止. 其工作流程如下: (图片来源菜鸟教程:http://www.runoob. ...
- domain logic approaches
领域逻辑组织可以分为三种主要的模式:事务脚本(Transaction Script).领域模型(Domain Model)和表模块(Table Module)” 1.domain logic appr ...