微信小程序自定义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 相关文章推荐
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python 统计字数的思路详解
2018/05/08 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Python之Sklearn使用入门教程
2021/02/19 Python
专项法律服务方案
2014/06/11 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
公司财务管理制度
2015/08/04 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
详解Go语言中Get/Post请求测试
2022/06/01 Golang
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript