微信小程序自定义prompt组件步骤详解
时间:2019-04-20
本文章向大家介绍微信小程序自定义prompt组件步骤详解,主要包括微信小程序自定义prompt组件步骤详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
步骤一:新建一个component的文件夹,用来放所有的自定义组件;
步骤二:在该目录下新建一个prompt的文件夹,用来放prompt组件;
步骤三:右击?>新建?>component
直接上代码
wxml
<view class="prompt-box" hidden="{{isHidden}}"> <view class="prompt-content contentFontColor"> <view class="prompt-title">{{title}}</view> <input class="prompt-input" type="digit" bindinput="_input" value="{{cost}}" /> <view class="prompt-btn-group"> <button class="btn-item prompt-cancel-btn contentFontColor" bind:tap="_cancel">{{btn_cancel}}</button> <button class="btn-item prompt-certain-btn" bind:tap="_confirm">{{btn_certain}}</button> </view> </view> </view>
js
// components/prompt/prompt.js Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: { title: { type: String, value: '标题' }, btn_cancel: { type: String, value: '取消' }, btn_certain: { type: String, value: '确定' } }, data: { isHidden: true, }, methods: { hidePrompt: function () { this.setData({ isHidden: true }) }, showPrompt () { this.setData({ isHidden: false }) }, /* * 内部私有方法建议以下划线开头 * triggerEvent 用于触发事件 */ _cancel () { //触发cancel事件,即在外部,在组件上绑定cancel事件即可,bind:cancel,像绑定tap一样 this.triggerEvent("cancel") }, _confirm () { this.triggerEvent("confirm"); }, _input(e){ //将参数传出去,这样在getInput函数中可以通过e去获得必要的参数 this.triggerEvent("getInput",e.detail); } } })
json
{ "component": true, "usingComponents": {} }
wxss
/* components/vas-prompt/vas-prompt.wxss */ .prompt-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 11; background: rgba(0, 0, 0, .5); } .prompt-content { position: absolute; left: 50%; top: 40%; width: 80%; max-width: 600rpx; border: 2rpx solid #ccc; border-radius: 10rpx; box-sizing: bordre-box; transform: translate(-50%, -50%); overflow: hidden; background: #fff; } .prompt-title { width: 100%; padding: 20rpx; text-align: center; font-size: 40rpx; border-bottom: 2rpx solid gray; } .prompt-input{ margin: 8%; padding: 10rpx 15rpx; width: 80%; height:85rpx; border: 1px solid #ccc; border-radius: 10rpx; } .prompt-btn-group{ display: flex; } .btn-item { width: 35%; margin-bottom: 20rpx; height: 100rpx; line-height: 100rpx; background-color: white; justify-content: space-around; } .prompt-certain-btn{ color: white; background-color: #4FEBDE; } .prompt-cancel-btn{ border: 1px solid #4FEBDE; } .contentFontColor { color: #868686; }
使用
例如,在index.html中使用
在json中添加useComponents属性
"usingComponents": { "vas-prompt": "./components/prompt/prompt" }
wxml
<prompt id="prompt" title='test' btn_certain='确定' bind:getInput="getInput" bind:cancel="cancel" bind:confirm="confirm"> </prompt> <button bindtap="showPrompt">点击弹出prompt</button>
js
//在onReady生命周期函数中,先获取prompt实例 onReady:function(){ this.prompt = this.selectComponent("#prompt"); }, //显示prompt showPrompt:function(){ this.prompt.showPrompt(); }, //将输入的value保存起来 getInput: function (e) { this.setData({ value: e.detail.value }) }, confirm: function () { let _cost = this.data.value; if (_cost == '') { console.log('你还未输入'); return; } else{ .... } }, cancel: function () { this.prompt.hidePrompt(); },
原理:
将prompt隐藏起来,点击显示的时候则显示,然后通过原生的tap事件,触发自定义事件,在使用该组件的时候,则使用自定义事件.
总结
以上所述是小编给大家介绍的微信小程序自定义prompt组件步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Flex的起步推动新语言学习
- 简单科普云计算相关内容
- Silverlight初级教程-开发工具
- WCF的Binding模型之五:绑定元素(Binding Element)
- 2018年物联网发展趋势
- Silverlight初级教程-概述
- WCF的Binding模型之四:信道工厂(Channel Factory)
- 如何做一个好的前端重构工程师
- 云计算是否真的对企业来说无所不能?
- 科协带你开个2017年科技世界的总结会!
- 基于StockRanker算法的机器学习量化策略
- Enterprise Library深入解析与灵活应用(6):自己动手创建迷你版AOP框架
- 交易费用过高的比特币还能成为“未来货币”吗?
- 应用大数据,做好技术成果市场价值评估
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SAP Spartacus中Angular json pipe的工作原理
- 02.Android崩溃Crash库之App崩溃分析
- mysql事务的实现原理
- 如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI
- 防盗链的原理以及实现
- Python如何根据日期判断周几
- http常见状态码
- golang time相关总结
- [白话解析] 深入浅出熵的概念 & 决策树之ID3算法
- [白话解析] 深入浅出边缘计算
- 变废为宝 | 旧电脑变云数据中心 | Esxi 配置
- 【Java面试总结】Java基础(上篇)
- Esxi安装LEDE(OpenWrt) | 旧电脑变庞路由
- [白话解析] 深入浅出贝叶斯定理
- LEDE(OpenWrt)安装openclash |旁路由技巧 | 配置网络流量全部通过旁路由