微信小程序自定义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实现异步刷新的代码(转载)
Mar 29 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
浅谈js闭包理解
Apr 01 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反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
总结一些js自定义的函数
2006/08/05 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Python下载指定页面上图片的方法
2016/05/12 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
工程招投标邀请书
2014/01/26 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
《口技》教学反思
2014/02/21 职场文书
公司经理任命书
2014/06/05 职场文书
员工年终自我评价
2014/09/14 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python