更新日期:2018-11-5

微信bug: 在for循环中使用组件时,遮罩层成黑层.

更新时间 2018-9-30

2018-9-30  1.在电脑上调试input超出输入框范围会出现文字模糊以及位移现象(手机端不影响)

index.wxml

 <view class="container">
<import src="/template/addtell.wxml" />
<template is="addtell" data="{{...addtell}}" />
<button bindtap="footAddtell">点击输入弹出内容</button>
</view>

导入模板和引入模板所在的数据

   <import src="/template/addtell.wxml" />
<template is="addtell" data="{{...addtell}}" />

引入模板数据 ... rest参数

  ES6引入了rest参数(形式为"...变量名"),用于获取函数的多余参数

参考小程序官方API

addtell.wxml

 <template name="addtell">
<view>
<modal title="联系方式" confirm-text="确认" cancel-text="取消" hidden="{{addtellHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">
<label>
<view class="tellsection">
<input class="tellinput" bindinput="saveUsertell" placeholder="请输入QQ" value="{{addtell.contract_info}}" />
<input class="tellinput" bindinput="saveUsertell" placeholder="请输入微信号" value="{{addtell.contract_info}}" />
</view>
</label>
</modal>
</view>
</template>

index.css

 .tellinput {
border: 1px solid #efeff4;
} .tellsection input {
color: #000;
width: 100%;
}

index.js

 Page({
data: {
addtell: {
addtellHidden: true, //弹出框显示/隐藏
},
},
footAddtell: function() {
//打开弹出框
this.setData({
addtell: {
addtellHidden: false,
contract_info: ''
}
})
},
modalConfirm: function() {
//弹出框确认操作
this.setData({
addtell: {
addtellHidden: true,
}
})
},
modalCancel: function() {
//弹出框取消操作
this.setData({
addtell: {
addtellHidden: true,
}
})
},
saveUsertell: function(e) {
//保存input框的值
this.setData({
contract_info: e.detail.value,
addtell: {
addtellHidden: false,
}
})
}
})

微信小程序 - 自定义模态对话框的更多相关文章

  1. 微信小程序自定义模态框(字体图标)

    组件已经传到github,自行下载:https://github.com/JinZhenZon/miniapp-customModel 支持如下配置: {  outWidth <number&g ...

  2. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  3. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  4. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  5. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  7. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  8. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  9. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

随机推荐

  1. PHP函数声明(三)

    /** * 一.任何参数的数量 * func_get_args()//接收一个数组,数组里面包含所有参数 * func_num_args()//取得共有几个参数 * func_get_arg(整数)/ ...

  2. 【BZOJ 3238】 3238: [Ahoi2013]差异(SAM)

    3238: [Ahoi2013]差异 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 3047  Solved: 1375 Description In ...

  3. bzoj5299: [Cqoi2018]解锁屏幕

    题目链接 bzoj 5299: [Cqoi2018]解锁屏幕 题解 很水的装压dp,相信没人需要看题解.... dp[i][j]表示状态为i最后一个到的点为j,然后转移就很好写了 不过 我读入优化没读 ...

  4. 【BFS】【枚举】HihoCoder - 1251 - The 2015 ACM-ICPC Asia Beijing Regional Contest - C - Today Is a Rainy Day

    题意:给你两个只由1~6组成的串,问你B串至少要经过几次操作变成A串. 一次操作要么选择一个种类的数,将其全部变成另一种类:要么选择一个数,将其变为另一个数. 可以证明,一定先进行一定数量的第一种操作 ...

  5. hdu 1011 树形dp+背包

    题意:有n个房间结构可看成一棵树,有m个士兵,从1号房间开始让士兵向相邻的房间出发,每个房间有一定的敌人,每个士兵可以对抗20个敌人,士兵在某个房间对抗敌人使无法走开,同时有一个价值,问你花费这m个士 ...

  6. bzoj 4769: 超级贞鱼 -- 归并排序

    4769: 超级贞鱼 Time Limit: 1 Sec  Memory Limit: 128 MB Description 马达加斯加贞鱼是一种神奇的双脚贞鱼,它们把自己的智慧写在脚上——每只贞鱼的 ...

  7. PIL The _imaging C module is not installed

    今天在WIN 7 64位用PIL的时候,提示 The _imaging C module is not installed ,原来是需要安装64位的. 刚开始安装的是这个:http://www.pyt ...

  8. luoguoj 1598 垂直柱状图 模拟

    P1598 垂直柱状图 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://www.luogu.org/problem/show?pid=1598 ...

  9. Microcontroller measures resistance without an ADC

    Sensors automate most of the processes in industry. Most of these sensors, such as those for ammonia ...

  10. TMapTextfile v.99/1

    By Hellinger Software. Class to handle text files as memory mapped files. Including efficient method ...