免费网站建设案例—微信小程序自制提示框(具

2021-02-22 23:49

手机上手机微信手机微信微信小程序内嵌的API中的网页页面网页页面互动交流功效,虽然提示功效十分多方位,但是所有的互动交流API中是没有可以本身在提示框中输入文本的功效,那么现如今大伙儿来源于于己做那般的一个提示框(可以带有输入功效),在提示框输入完内容之后,点一下确立,可以将文本内容返回,点一下撤消则可以回到之前的状况。

(在这里里里,主页面的有效合理布局可以根据每个人的想法来有效合理布局,这儿呈现的css之后呈现提示框一一部分的)


1、最开始打开手机上手机微信开发设计设计方案者专用型专用工具,建立一个编号模板,那么大伙儿这一提示框就是写在这里里个网页页面网页页面上。
[标识:內容1]

    这儿大伙儿主页面称之为index

2、在基本网页页面网页页面中写上一个姓名的文本,现如今姓名用 text {{stuName}} /text 说明,接着为一个button功能键,再在js文本文档中,建立相对性的点一下恶变恶性事件以及stuName的信息内容內容。那般,一个原始网页页面网页页面就写好了。

下面大伙儿一开始弹出来来框网页页面网页页面的制作

 view hidden='{{!ifName}}'         view /view         view             view                 text 修改姓名 /text             /view             view                 view                     input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName' /input                 /view             /view             view                 view                     button catchtap='cancel' 撤消 /button                 /view                 view                     button catchtap='confirm' 确立 /button                 /view             /view         /view     /view 

3、大伙儿可以发现,点一下功能键后弹出来来输入框,倘若点一下除撤消和确立之外的地域,并不是会出現体现的。便于确保这一功效,大伙儿用一个毫无疑问位置的三d3D渲染层(toastbg),遮住住所有网页页面网页页面,并且倘若你的网页页面网页页面长度没有旋转的话,请输入min—height:100vh,倘若网页页面网页页面造成旋转,请把长度控制在height:100%便可以看到所有网页页面网页页面都被遮住。并且这一遮住的网页页面网页页面要关键主要表现为透明,opacity:0.2,便可以

4、bindinput为写文本时要打开的恶变恶性事件,data-name为文本数据信息信息内容所存储的地域,在js广州中山大学家可以把这一数据信息信息内容打印出来,会发现大伙儿所输入的文本信息内容內容。

以下为css的编号

.toast-box {    width: 100%;    height: 100%;    opacity: 1;    position: fixed;    top: 0px;    left: 0px;}.toastbg {    opacity: 0.2;    background-color: black;    position: absolute;    width: 100%;    min-height: 100vh;}.showToast {    position: absolute;    opacity: 1;    width: 70%;    margin-left: 15%;    margin-top: 40%;}.toast-title {    padding-left: 5%;    background-color: #2196f3;    color: white;    padding-top: 2vh;    padding-bottom: 2vh;    border-top-right-radius: 16rpx;    border-top-left-radius: 16rpx;}.toast-main {    padding-top: 2vh;    padding-bottom: 2vh;    background-color: white;    text-align: center;}.toast-input {    margin-left: 5%;    margin-right: 5%;    border: 1px solid #ddd;    padding-left: 2vh;    padding-right: 2vh;    padding-top: 1vh;    padding-bottom: 1vh;}.toast-button {    display: flex;}.button1 {    width: 50%;}.button2 {    width: 50%;}.button1 button {    width: 100%;    background-color: white;    color: red;    border-radius: 0px;    border-bottom-left-radius: 16rpx;}.button2 button{    width: 100%;    background-color: white;    color: black;    border-radius: 0px;    border-bottom-right-radius: 16rpx;}.picker {    padding-top: 1vh;    padding-bottom: 1vh;}

大伙儿可以根据本身的钟爱,对提示框的样式进行变更


5、编写js编号,大伙儿务必进行以下一些基本因素(点一下出现弹出来对话框,撤消不会改变转变据值,确立进行辨别数据信息信息内容值,若为空则不能以变更,要不然可以变更,并且主页表层的内容要变为相对性变更后的内容)

6、给最表面的弹出来对话框另附hidden(如图所示所显示所显示信息),为这一值初始为false,点一下功能键后打开恶变恶性事件,改false为true,那般便可以点一下出现弹出来对话框。

7、为撤消功能键另附点一下恶变恶性事件,与hidden的一一部分正好相反便可以。

8、为编写文本关系恶变恶性事件,上述编号中取名字为setValue,这一涵数大伙儿传入一个event进去,将其打印,大伙儿可以发现在其的detail中挺大家没多久所编写的内容,大伙儿将这一值,推送给js中data一个特点,这儿大伙儿取名字为edit。

9、为确立关系恶变恶性事件,用this.data.edit将这一值进行辨别,若为空,大伙儿用wx.showToast提示顾客信息内容內容没有填好详尽,并且网页页面网页页面不可易变更。若不因空,则大伙儿setData一下大伙儿的stuName为这一edit的值,并且再度把hidden的特点值改为false。

10、返回到初始网页页面网页页面大伙儿即可以看到大伙儿本身做得一个提示框,并且具有修改值的功效


经典著作权声明

即速应用倡导高度重视与维护保养技术专业专业知识产权年限期限。如发现本站文章内容內容存在经典著作权难点,烦请提供经典著作权疑虑、真正真实身份确认、经典著作所有权证实、 ,大伙儿将马上处理。本站文章内容內容仅作共享资源沟通交流沟通交流关键主要用途,写作者看法不一同于即速应用看法。顾客与写作者的一切交易与本站无关紧要,请悉知。


弥勒供电系统系统软件与手机上手机微信手机微信微信小程序促进智能化化交费协议书便签署 弥勒供电系统系统软件局邀请手机上手机微信手机微信微信小程序“融e电”开发设计设计方案商在我国工商局局金融业组织相关工作中中工作中工作人员学员学生就业实干际实际操作流程进行学习培训学习培训 1605581535 2020双十一,手机上手机微信手机微信微信小程序如何杀出重围占据生产制造制造行业盈利? 双十一即将到来,各种各样商家早已在十月中就早就摩拳擦掌了,相对性性能比过去双十一的盛况,今年手机微信微信小程序才华横溢变为电子器件商务接待生产制造制造行业重要的比赛场。根据阿拉丁指数值值报告预测分析剖析大伙儿能够看到,今年双十一手机微信微信小程序的广告宣传宣传策划运营经营规模将呈现爆发式提升,有去年18亿到今年的4六亿,提升做到250%。手机微信微信小程序电子器件商务接待将变为流量争夺的重要方法。 1605581327 在我国邮政于百度搜索检索App公布集寄件、查询非常于一身的著名知名品牌卡功效 一年一度的双11购物快乐按期而至,大伙儿在“抢货”的同时,无可避免导致由于退货货要想寄快递公司企业的规定。便于考虑到顾客在双十一前后左右上下猛增的快递公司企业规定,在我国邮政于百度搜索检索App公布集寄件、查询非常于一身的著名知名品牌卡功效,该功效由百度搜索检索智能化化手机微信微信小程序载重。 1604628430



扫描二维码分享到微信

在线咨询
联系电话

020-66889888