微信小程序自定义prompt组件步骤详解


Posted in Javascript onJune 12, 2018

步骤一:新建一个component的文件夹,用来放所有的自定义组件;
 步骤二:在该目录下新建一个prompt的文件夹,用来放prompt组件;
 步骤三:右击?>新建?>component

微信小程序自定义prompt组件步骤详解

直接上代码

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组件步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
js实现购物车功能
Jun 12 #Javascript
浅谈Node.js 中间件模式
Jun 12 #Javascript
浅谈Webpack打包优化技巧
Jun 12 #Javascript
关于TypeScript模块导入的那些事
Jun 12 #Javascript
JS实现前端页面的搜索功能
Jun 12 #Javascript
微信小程序实现弹出菜单功能
Jun 12 #Javascript
微信小程序实现折叠与展开文章功能
Jun 12 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php flv视频时间获取函数
2010/06/29 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jquery each()源代码
2011/02/14 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
为python设置socket代理的方法
2015/01/14 Python
Python实现多属性排序的方法
2018/12/05 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python3注册全局热键的实现
2020/03/22 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
应届生污水处理求职信
2013/11/06 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
安全教育感言
2014/03/04 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
被委托人身份证明
2015/08/07 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript