微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段。仅供参考和学习。
编写组件:
在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组件"tips"
文件结构跟page一样,有自己的js逻辑,json配置文件,标签wxml,样式文件wxss。这里使用的是weui的样式库。
tips.wxml:
<view class="weui-toptips weui-toptips_warn" hidden="{{showTopTips}}">{{msg}}</view>
tips.js
// components/tips/tips.js
Component({
/**
* 组件的属性列表
*/
properties: { }, /**
* 组件的初始数据
*/
data: {
showTopTips: true,
msg: '提示'
}, /**
* 组件的方法列表
*/
methods: {
showDialog(msg) {
wx.showModal({
title: '提示',
content: msg,
})
},
showTopTip: function(msg) {
let that = this;
that.setData({
showTopTips: false,
msg: msg
});
setTimeout(function() {
that.setData({
showTopTips: true
});
}, 1500);
}
}
})
tips.wxss
/* components/tips/tips.wxss */ /*在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。*/ .inner {
color: red;
} .weui-toptips_warn {
background-color: #e64340;
} .weui-toptips {
position: fixed;
-webkit-transform: translateZ(0);
transform: translateZ(0);
top:;
left:;
right:;
padding: 5px;
font-size: 14px;
text-align: center;
color: #fff;
z-index:;
word-wrap: break-word;
word-break: break-all;
}
下面做一个测试页调用
/pages/test页进行测试
1、首先test.json配置中引用tips自定义组件:
{
"usingComponents": {
"mytips": "/components/tips/tips",
"dialog": "/components/dialog/dialog"
}
}
2、test.wxml 中添加自定义组件标签
<mytips id='mytips'></mytips>
<view class='container'>
<button type='primary' size='default' bindtap='showTip'>提示</button>
</view>
3、test.js 调用自定义组件中的方法和字段赋值
// pages/test/test.js
var tips ;
Page({ /**
* 页面的初始数据
*/
data: {
com_data:'',
showTopTips:false,
msg:''
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
com_data:'test 设置属性值'
})
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//获得mytips组件
tips = this.selectComponent("#mytips")
//获得dialog组件
//this.dialog = this.selectComponent("#dialog");
},
showTip: function () {
//tips.showDialog('jbbbbbbbb');
//return
tips.showTopTip('提示内容。。。'); },
showDialog() {
this.dialog.showDialog('显示的内容');
}, //取消事件
_cancelEvent() {
console.log('你点击了取消');
this.dialog.hideDialog();
},
//确认事件
_confirmEvent() {
console.log('你点击了确定');
this.dialog.hideDialog();
}
})
到此自定义组件的定义和使用已经告一段落。
效果显示:在页面顶端显示提示内容。
微信小程序自定义组件,提示组件的更多相关文章
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
- 微信小程序自定义导航栏组件
1.首先,要在json文件中设置为自定义的形式 "navigationStyle": "custom" 2.计算相关值 导航栏分为状态栏和标题栏,只要能算出每台 ...
- 微信小程序 - 自定义tabbar(组件)
配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- 百度小程序自定义通用toast组件
百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...
- 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置
1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序——自定义导航栏
微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...
随机推荐
- manjaro系统的回滚操作
作为linux系统的爱好者,自从使用linux后,就喜欢追求新的软件,连系统都换成了滚动升级的版本.manjaro基于arch linux,同时也是kde的支持系统,升级非常频繁.使用了几年,很少碰到 ...
- 20189220 余超《Linux内核原理与分析》第六周作业
系统调用的三层机制 实验过程 1.克隆MenuOS rm menu -rf //强制删除当前menu git clone http://git.shiyanlou.com/mengning/menu. ...
- .NET Core Startup启动类
.NET Framework 早期架构 在.NET Core面世之前,也就是.NET Framework时代,我们的软件架架构有一些比较通用的架构.抛开我们的业务组件,在我们的系统中我们总会有一些基础 ...
- QString 中文编码转换
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/xxm524/article/det ...
- Android -------- BouncingJellyView 果冻视图(阻尼效果)
分享一个不错的效果,分享给大家 BouncingJellyView 果冻视图,就像果冻一样伸缩弹跳,也叫阻尼效果.这个效果在MIUI上面到处都可以看到. 效果图: 使用 项目更目录bulid.grad ...
- Java基础 throw 抛出异常后,用try...catch捕获
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- 如何从OA系统批量整理出邮箱地址,并导入到Foxmail 地址薄中?
一.打开某位leader的OA,点击查看“下属” a. 将所有的下属信息 --- 全选 --- 复制 --- 粘贴到 excel 表格中 b. 分别提取“姓名” 和 “邮箱”地址信息,结合notepa ...
- C# Newtonsoft.Json解析json字符串处理(最清晰易懂的方法)
需求: 假设有如下json字符串: { ", "employees": [ { "firstName": "Bill", &quo ...
- 001-mac搭建Python开发环境、Anaconda、zsh兼容
一.概述 mac下搭建python环境推荐使用Anaconda+Pycharm. 1.1.Anaconda Anaconda是一个免费开源的Python和R语言的发行版本,用于计算科学(数据科学.机器 ...
- 零起点Python大数据与量化交易
零起点Python大数据与量化交易 第1章 从故事开始学量化 1 1.1 亿万富翁的“神奇公式” 2 1.1.1 案例1-1:亿万富翁的“神奇公式” 2 1.1.2 案例分析:Python图表 5 1 ...