【微信小程序】自定义弹窗文本输入框效果图&完整代码

效果图

在输入框中进行内容的输入
点击确认后在姓名一栏进行更新修改
点击返回后姓名一栏不做任何修改
在这个的基础上你可以自定义任何弹窗

wxml

<view class="row xian"  bindtap='emailClick'><view class="zuo">姓名</view><view class="you"><view class="zhushi">{{volunteer.name}}</view><image src="../../images/icon/jiantou.png" class="jiantou"></image></view>
</view><!-- 弹窗蒙版 -->
<view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'><view class='windowRow'><text class='userTitle'>修改姓名</text><view class='back' bindtap='back'>返回</view></view><view style="width:100%" class='wishName'><input style="width:100%" bindinput='wish_put' placeholder='请输入姓名' placeholder-class="holder_cls" class='wish_put'></input></view><view style="width:94%" class='wishbnt' bindtap='name'>确定</view>
</view>

js

Page({/*** 页面的初始数据*/
data: {showModal: false,name:'张三'
},/*** 控制显示*/
eject:function(){this.setData({showModal:true})
},
/**
* 点击返回按钮隐藏
*/
back:function(){this.setData({showModal:false})
},
/**
* 获取input输入值
*/
wish_put:function(e){this.setData({textV:e.detail.value})
},
/**
* 点击确定按钮获取input值并且关闭弹窗
*/
name:function(){console.log(this.data.textV)this.setData({showModal:false,name:this.data.textV})
}
})

wxss

这里提供我这个弹窗的样式，当然你也可以自己进行更改定义

/* 弹窗样式 */
.model{position: absolute;width: 100%;height: 100%;background: #000;z-index: 999;opacity: 0.5;top: 0;left:0;
}
.modalDlg{width: 80%;position: fixed;top:300rpx;left: 0;right: 0;z-index: 9999;margin: 0 auto;padding: 55rpx;background-color: #fff;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;
}
.windowRow{display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding-bottom: 15rpx;width: 100%;
}
.userTitle{font-size: 42rpx;
}
.back{text-align: center;color: #f0a500;font-size: 30rpx;
}
.wishName{width: 100%;justify-content: center;flex-direction: row;display: flex;margin: 40rpx 0rpx;
}
.wish_put{width: 100%;border: #ededef 1rpx solid;background-color: #f6f7fb;border-radius: 12rpx;padding: 30rpx 20rpx;margin: 20rpx 0rpx;
}
.holder_cls{color: #909399;
}
.wishbnt{background-color: #fec600;text-align: center;border-radius: 50rpx;padding: 25rpx;color: white;
}
/*弹窗样式结束*//* 下面的姓名样式，不要也没什么影响 */
.jiantou{width: 35rpx;height: 35rpx;margin-left: 10rpx;
}
.fenge{margin-bottom: 30rpx;
}
.xian{border-bottom: #e5e5e5 1rpx solid;
}
.yellow{color: #f0a500;font-weight: 700;
}
.box{background-color: white;padding: 0rpx 25rpx;display: flex;flex-direction: column;
}
.row{height: 120rpx;display: flex;justify-content: space-between;align-items: center;
}
.you{height: 100%;display: flex;justify-content: space-between;align-items: center;
}
.zhushi{font-size: 28rpx;color: #808080;
}
/* 下面的姓名样式结束 */

【微信小程序】自定义弹窗蒙版输入框效果图完整代码相关推荐

html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...
微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
微信小程序获取用户收货地址完整代码
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 获取用户收货地址需要用户点击授权,所以有两种情况,确认授权.取消授权. 情况一,用户第一次访问用户地址授权,并 ...
c语言小程序跑马灯,微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:一个人活着就是为了让更多的人更好的活着! Wxss代码:/*首页跑马灯 ...
微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:  < ...
微信小程序自定义弹窗实例
自定义模态对话框实例由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModa ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...

【微信小程序】自定义弹窗蒙版输入框效果图完整代码

【微信小程序】自定义弹窗文本输入框效果图&完整代码

【微信小程序】自定义弹窗蒙版输入框效果图完整代码相关推荐

最新文章

热门文章