微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段。仅供参考和学习。

编写组件:

在根目录下添加“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();
}
})

到此自定义组件的定义和使用已经告一段落。

效果显示:在页面顶端显示提示内容。

微信小程序自定义组件,提示组件的更多相关文章

  1. 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况

    背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...

  2. 微信小程序自定义导航栏组件

    1.首先,要在json文件中设置为自定义的形式 "navigationStyle": "custom" 2.计算相关值 导航栏分为状态栏和标题栏,只要能算出每台 ...

  3. 微信小程序 - 自定义tabbar(组件)

    配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...

  4. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  5. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  6. 百度小程序自定义通用toast组件

    百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...

  7. 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置

    1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...

  8. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  9. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

随机推荐

  1. 在Windows环境下搭建Snort+BASE入侵检测系统

    操作系统: Windows 7 (service pack 1) 所需软件: 虚拟机:VirtualBox 网络数据包截取驱动程序:WinPcap 4.1.3 (WinPcap_4_1_3.exe) ...

  2. 年轻人的第一个 Spring Boot 应用,太爽了!

    Spring Boot 大家都知道是啥吧? 还有不知道的来看这篇扫下盲:告诉你,Spring Boot 真是个牛逼货!. 顺便再往下看,栈长给你带来年轻人的第一个 Spring Boot 应用,撸码史 ...

  3. Android adb命令打印activity堆栈

    ubuntu系统: adb shell dumpsys activity activities | sed -En -e '/Running activities/,/Run #0/p' window ...

  4. Microsoft Office Project 2016使用心得(一)

    Microsoft Office Project 2016使用心得(一) 新创建一个项目后的准备工作 1.修改项目开始时间 因为项目默认显示的是2009年的信息,所有视图都是从2009年开始,不便于查 ...

  5. Android Studio打包没有Generate signed apk选项 解决方法

    原文地址:https://www.jianshu.com/p/9e02e55f0ba8 1.点击build栏目-并没有Generate signed apk选项 2.点击file,选中如下图所示Syn ...

  6. LayaIDE 报typescript编译版本不一致的错

    LayaIDE 报typescript编译版本不一致的错 文件 -> 首选项->用户设置那里修改下 settings.json // 将设置放入此文件中以覆盖默认设置 { "ty ...

  7. [IR] Inverted Index & Boolean retrieval

    教材:<信息检索导论> 倒排索引 How to build Inverted Index? 1. Token sequence. 2. Sort by terms. 3. Dictiona ...

  8. tushare包使用案例

    Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据,为他们在数据获取 ...

  9. [LeetCode] 682. Baseball Game 棒球游戏

    You're now a baseball game point recorder. Given a list of strings, each string can be one of the 4 ...

  10. svn密码找回

    TortoiseSVN Password Decrypterhttp://www.leapbeyond.com/ric/TSvnPD/点击打开链接去这个地址下载这个,然后直接运行,就可以看到你的use ...