微信小程序自定义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 相关文章推荐
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue组件生命周期详解
2017/11/07 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python字符串格式化f-string多种功能实现
2020/05/07 Python
python爬虫容易学吗
2020/06/02 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
英文导游欢迎词
2014/01/11 职场文书
面试后的感谢信范文
2014/02/01 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
实验心得体会范文
2016/01/25 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers