微信小程序自定义组件示例

声明：此文借鉴两位前辈的博文
https://www.jianshu.com/p/8a2a730d9e60
http://www.jb51.net/article/117295.htm
感谢这两位前辈的贡献！！！
实现功能：把密码输入封装成一个自定义组件，可以多处调用此组件
component部分：

pwdalert.wxml

<view wx:if="{{pwd_flag}}" class="password"><view class="input-content-wrap"><view class="top"><view catchtap="close_pwd_alert" class="close">×</view><view class="txt">{{pwdtitle}}</view><view catchtap="modify_password" class="forget"></view></view><view class="actual_fee"><span>{{currency}}</span><text>{{amt}}</text></view><view catchtap="setFocus" class="input-password-wrap"><view class="password_dot"><i wx:if="{{pay_password.length>=1}}"></i></view><view class="password_dot"><i wx:if="{{pay_password.length>=2}}"></i></view><view class="password_dot"><i wx:if="{{pay_password.length>=3}}"></i></view><view class="password_dot"><i wx:if="{{pay_password.length>=4}}"></i></view><view class="password_dot"><i wx:if="{{pay_password.length>=5}}"></i></view><view class="password_dot"><i wx:if="{{pay_password.length>=6}}"></i></view></view></view><input bindinput="_pwdEvent" class="input-content" password type="number" focus="{{isFocus}}" maxlength="6" />
</view>

pwdalert.wxss

page {height: 100%;width: 100%;background: #e8e8e8;
}page .password {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);
}page .password .input-content-wrap {position: absolute;top:300rpx;left: 50%;display: flex;flex-direction: column;width: 600rpx;margin-left: -300rpx;background: #fff;border-radius: 20rpx;
}page .password .input-content-wrap .top {display: flex;align-items: center;height: 90rpx;border-bottom: 2rpx solid #ddd;justify-content: space-around;
}page .password .input-content-wrap .top .close {font-size: 44rpx;color: #999;font-weight: 100;
}page .password .input-content-wrap .top .forget {color: #00a2ff;font-size: 22rpx;
}page .password .input-content-wrap .actual_fee {display: flex;align-items: center;justify-content: center;color: #000;height: 100rpx;margin: 0 23rpx;border-bottom: 2rpx solid #ddd;
}page .password .input-content-wrap .actual_fee span {font-size: 60rpx;
}page .password .input-content-wrap .actual_fee text {font-size: 60rpx;
}page .password .input-content-wrap .input-password-wrap {display: flex;align-items: center;justify-content: center;height: 150rpx;
}page .password .input-content-wrap .input-password-wrap .password_dot {display: flex;align-items: center;justify-content: center;text-align: center;color: #000;box-sizing: border-box;width: 90rpx;height: 90rpx;border: 2rpx solid #ddd;border-left: none 0;
}page .password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {border-left: 2rpx solid #ddd;
}page .password .input-content-wrap .input-password-wrap .password_dot i {background: #000;border-radius: 50%;width: 20rpx;height: 20rpx;
}page .password .input-content {position: absolute;opacity: 0;left: -100%;top: 600rpx;background: #f56;z-index: -999;
}page .password .input-content.active {z-index: -99;
}

pwdalert.json

{"component": true
}

pwdalert.js

Component({properties: {pwdtitle: { // 属性名type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: '请输入支付密码', // 属性初始值（可选），如果未指定则会根据类型选择一个observer: function (newVal, oldVal) { } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'},currency:{ //币种type:String,value:'',},amt: { //金额type: String,value: '',},pwdfull: { //type: String,value: '',},},//组件的对外属性data: {isFocus: false,//控制input 聚焦pwd_flag: false//密码输入遮罩},//私有数据，可用于模版渲染methods: {//组件的方法，包括事件响应函数和任意的自定义方法close_pwd_alert: function () {//关闭钱包输入密码遮罩console.log('close pwd alert')this.setData({isFocus: false,//失去焦点pwd_flag: false,})},show_pwd_alert: function () {//关闭钱包输入密码遮罩console.log('show pwd alert')this.setData({isFocus: true,//获得焦点pwd_flag: true,//获得焦点})},setFocus: function () {    console.log('isFocus', this.data.isFocus)this.setData({isFocus: true})},_pwdEvent: function (e) {var pwd = e.detail.value// var app = this// console.log("pwdEvent=="+JSON.stringify(e))this.setData({pay_password: pwd});if (pwd.length == 6) {//密码长度6位时//监听密码输入6位时，要做的事情console.log("密码长度是6位")this.data.pwdfull = pwd}
//自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项// this.triggerEvent("pwdEvent") this.triggerEvent("pwdEvent",e.detail) },},// 内部方法建议以下划线开头_propertyChange: function (newVal, oldVal) {}
})

调用component：
index.wxml

<view class="page"><view style='padding-left:20rpx;padding-right:20rpx;padding-top:100rpx;'><button class="weui-btn" type="primary" bindtap="showDialog" style='clear:both'>showDialog</button></view><!--调用自定义组件--><pwddialog id='pwddialog' pwdtitle="{{pwdtitle}}" currency="{{currency}}" amt="{{amt}}" bind:pwdEvent="_pwdEvent" bind:close_pwd_alert="close_pwd_alert" bind:setFocus="setFocus"></pwddialog></view>

index.wxss

@import "../../utils/weui.wxss";
.primaryfont{font-size:1.0rem;color:black;
}

index.json

{"usingComponents": {"dialog": "../components/dialog/dialog","pwddialog":"../components/pwddialog/pwddialog"}
}

index.js

Page({data: {pwdtitle:"我是标题",pwdfull:'',currency:'￥',amt:'100',},onReady: function () { /**生命周期函数--监听页面初次渲染完成 *///获得dialog组件  this.dialog = this.selectComponent("#pwddialog");},showDialog: function () { //button点击事件console.log("click dialog button1")//显示alertthis.dialog.show_pwd_alert()console.log("click dialog button2")},_pwdEvent(e) { //回调事件   console.log("e.detail==" + JSON.stringify(e.detail))console.log("e.detail.value==" + JSON.stringify(e.detail.value))console.log("pwdfull==" + this.dialog.data.pwdfull)},});

微信小程序自定义组件示例相关推荐

基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
【小程序】一文学会微信小程序自定义组件封装
一.什么是自定义组件在实际开发过程中,经常会有代码复用的情况,即在不同的页面有类似结构的代码块,类似的代码反复出现,这样会增加代码维护成本,也会造成代码的高耦合,为了解决这一情况,微信小程序支持了更 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用组件与模块类似,实现了功能的复用,提高开发速率,减少代码量在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者导航栏等 . ...

微信小程序自定义组件示例

微信小程序自定义组件示例相关推荐

最新文章

热门文章