微信小程序自定义文本输入框
本文摘录于:https://blog.csdn.net/ZNYSYS520/article/details/81878598-只是做学习备份之用,绝无抄袭之意,有疑惑请联系本人!
这里参考git仓库,然后自行整理:https://gitee.com/waf2311/WeChatDiyModal.git
1.建立文件:component\modal\modal.wxml
他的内容如下:
<!--文本弹窗https://blog.csdn.net/ZNYSYS520/article/details/81878598-->
<template name="TextPopupBox">
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{hintinfo.ishow}}"></view>
<view class="modal-dialog" wx:if="{{hintinfo.ishow}}"><view class="modal-title">{{hintinfo.title}}</view><view class="modal-content"><view class="modal-input"><input placeholder-class="input-holder" type="number" bindinput="inputChange" class="input" placeholder="{{hintinfo.inputplaceholder}}" maxlength="11"></input></view></view><view class="modal-footer"><view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{hintinfo.canletext}}</view><view class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{hintinfo.confirmtext}}</view></view>
</view>
</template>
2.在需要弹窗的page的wxml文件中,这样来引用:
<import src="../../component/modal/modal.wxml" />
<template is="TextPopupBox" data="{{hintinfo}}"/>
3.在page的js文件的data字段中加入如下声明:
/*文本弹窗类的特定数据*ishow是否显示,默认不显示*title弹窗标题,数据过多的时候会分行显示*inputplaceholder输入框预输入内容*inputValue当前输入的值,onConfirm事件可通过该值确定输入的内容*confirmtext确认按钮显示的文字*canletext取消按钮显示的文字*/ hintinfo: {ishow: false,title: "注意:手机号是获取云文件的凭证,输入错误将获取不到之前的文件",inputplaceholder: "请输入手机号",inputValue: "",confirmtext: "确定",canletext: "取消"},
3.在page的js文件加入如下代码:
/*.............................................文本弹窗类开始.............................................*/ /*** 文本弹窗https://blog.csdn.net/ZNYSYS520/article/details/81878598*/showDialogBtn: function() {var that = this;var _hintinfo = that.data.hintinfo;_hintinfo.ishow = true;that.setData({hintinfo: _hintinfo})},/*** 弹出框蒙层截断touchmove事件*/preventTouchMove: function () {},/*** 隐藏模态对话框*/hideModal: function () {var that = this;var _hintinfo = that.data.hintinfo;_hintinfo.ishow = false;that.setData({hintinfo: _hintinfo})},/*** 对话框取消按钮点击事件*/onCancel: function () {this.hideModal();util.showHintModal("请注意:取消输入将不能够获取到云文件,并且和文件相关功能不能够使用");},/*** 对话框确认按钮点击事件*/onConfirm: function (res) {this.hideModal();console.log("set phone:",this.data.hintinfo.inputValue)if(this.data.hintinfo.inputValue.length!=11){util.showHintModal("手机号格式错误,请重新输入!");this.showDialogBtn()}},/*** 对话框湿输入数据改变事件*/inputChange: function (res) {this.data.hintinfo.inputValue = res.detail.value; }/*.............................................文本弹窗类结束.............................................*/
经过上面的修改已经可以弹出一个文本框了
微信小程序文本框输入
这里没有把代码也引用,因为这样做太复杂了!
补充说明:
上面的处理有一个地方没有说,其实不算完整,就是wxss文件没有做说明,要让一个wxml文件能够布局成功,这里还必须要用wxss里面的对象做辅助,所以修改modal目录下增加一个modal.wxss文件:
/* component\modal\modal.wxss*/
.show-btn {
margin-top: 100rpx;
color: #22cc22;
}.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}.modal-dialog {
width: 540rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 9999;
background: #f9f9f9;
margin: -180rpx 105rpx;
border-radius: 36rpx;
}.modal-title {
padding-top: 50rpx;
font-size: 36rpx;
color: #030303;
text-align: center;
}.modal-content {
padding: 50rpx 32rpx;
}.modal-input {
display: flex;
background: #fff;
border: 2rpx solid #ddd;
border-radius: 4rpx;
font-size: 28rpx;
}.input {
width: 100%;
height: 82rpx;
font-size: 28rpx;
line-height: 28rpx;
padding: 0 20rpx;
box-sizing: border-box;
color: #333;
}input-holder {
color: #666;
font-size: 28rpx;
}.modal-footer {
display: flex;
flex-direction: row;
height: 86rpx;
border-top: 1px solid #dedede;
font-size: 34rpx;
line-height: 86rpx;
}.btn-cancel {
width: 50%;
color: #666;
text-align: center;
border-right: 1px solid #dedede;
}.btn-confirm {
width: 50%;
color: #ec5300;
text-align: center;
}
在需要引用modal的地方载入这个文件:
@import "../../component/modal/modal" ;
为了方便书写,wxml文件也不包含文件后缀:
<import src="../../component/modal/modal" />
<template is="TextPopupBox" data="{{...hintinfo}}"/>
补充说明
经过上次的修改后,modal.wxml文件中不再适合直接引用hintinfo变量,而是直接引用其内部成员,注意模块引用方法修改如下:
<import src="../../component/modal/modal" />
<template is="TextPopupBox" data="{{...hintinfo}}"/>
modal.wxml文件内容如下:
<!--文本弹窗https://blog.csdn.net/ZNYSYS520/article/details/81878598-->
<template name="TextPopupBox">
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{ishow}}"></view>
<view class="modal-dialog" wx:if="{{ishow}}"><view class="modal-title">{{title}}</view><view class="modal-content"><view class="modal-input"><input placeholder-class="input-holder" type="number" bindinput="inputChange" class="input" placeholder="{{inputplaceholder}}" maxlength="11"></input></view></view><view class="modal-footer"><view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{canletext}}</view><view class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{confirmtext}}</view></view>
</view>
</template>
微信小程序自定义文本输入框相关推荐
- 微信小程序自定义文本输入框-升级版
之前也有写过微信小程序自定义输入框的实现方法,请看文章;https://blog.csdn.net/chengdong1314/article/details/123577082 这里之所以再次写这篇 ...
- 微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言 大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- 微信小程序自定义搜索框(searchbar)
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
- 微信小程序自定义类似微信联系人组件
微信小程序自定义联系人弹窗 在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序 ...
- 微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
- 微信小程序自定义模态框,官方版本与自定义可扩展版本
微信小程序自定义模态框,官方版本与自定义可扩展版本 提示:文章最后有源码,可自取 文章主要通过模仿官方的模态框进行自定义模态框的设计,我将会先讲述原理,然后给出源码,最后指出一些需要注意的地方 提示: ...
- 微信小程序自定义授权弹框
微信小程序自定义授权弹框 最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
最新文章
- devcon的测试 尝试使用devcon命令重置Intel Realsense D435摄像头 USB
- linux下的二进制文件的编辑和查看 -
- php ci post 请求,ci检测是ajax还是页面post提交数据的方法
- Cause: java.lang.IllegalArgumentException: No enum constant org.apache.ibatis.type.JdbcType.Date
- JPA Annotation注解
- 太惨了,今年没年终奖了!
- 游戏剧情哪家强?日式RPG与欧美沙盒的优劣
- 测试管理工具实践(小组作业)
- 秒杀系统设计中的业务性思考
- python socket-tcp逻辑
- SharePoint 2010 中有个新的列表模板“导入电子表格”可以直接导入Excel数据并创建为列表 ....
- 【CF734F】Anton and School(构造)
- rownum与order by
- 一文读懂海姆达尔Heimdallr经济模型,解析链游明星的价值优势
- Windows电脑快捷键
- CAN总线与CANOPEN协议入门
- 如何把视频嵌入PPT合为一个文件
- 【算法竞赛】力扣杯春赛-个人赛 LCCUP‘23复盘
- 包载信使RNA(mRNA)的虫草多糖脂质体|冬虫夏草多糖脂质体包载小干扰RNA(siRNA)
- 1312:【例3.4】昆虫繁殖(递推算法)
热门文章
- VTK笔记-计算MPR切面-vtkImageReslice输出视口设置
- 程序在计算机内部是如何运行的
- Experimental Educational Round: VolBIT Formulas Blitz-R. Game
- mmap java实现_理解java中的mmap
- 【SolidWorks】画一个简单的钣金外壳
- 灯具行业MES解决方案,实现产品的正反向追溯
- 5项人工智能实例,令人惊叹
- python实现聊天小程序_Python使用django框架实现多人在线匿名聊天的小程序
- C++ for循环中有冒号,for(auto c:s)与for(auto c:s)的用法
- 堆优化prim算法C语言,最小生成树(二)--prim算法实现以及堆优化