微信小程序自定义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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 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
php仿ZOL分页类代码
2008/10/02 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
php的一些小问题
2010/07/03 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
详解Django中的form库的使用
2015/07/18 Python
Python使用folium excel绘制point
2019/01/03 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python的log日志功能及设置方法
2019/07/11 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
年会主持词结束语
2014/03/27 职场文书
拉歌口号大全
2014/06/13 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
校园安全教育心得体会
2016/01/15 职场文书