微信小程序自定义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制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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学习之变量的使用
2011/05/29 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
PyTorch安装与基本使用详解
2020/08/31 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
我未来的职业规划范文
2014/01/11 职场文书
学生安全责任书模板
2014/07/25 职场文书
会计工作态度自我评价
2015/03/06 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
党组织结对共建协议书
2016/03/23 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
python通过新建环境安装tfx的问题
2022/05/20 Python