小程序封装一个有输入框的modal层组件
其实很简单,就是在modal中添加新的 input
<view>
<modal class="modal" wx:if="{{!hiddenModal}}"
title="{{title}}" confirm-text="确定" cancel-text="取消" bindconfirm="modalconfirm" bindcancel="modalcancel">
<view class="input-line">
<input placeholder='请输入内容' maxlength="{{ maxlength }}" bindinput='input' type="text" type="text" value="{{ textvalue }}" />
<text>{{ currentlength}}/{{ maxlength }}</text>
</view>
</modal>
</view>
.modal{
width: 540rpx;
max-width: 540rpx;
border-radius: 28rpx;
.input-line {
display: flex;
border: 2rpx solid rgba(0, 0, 0, 0.05);
font-size: 28rpx;
padding: 16rpx;
height: 40rpx;
line-height: 40rpx;
}
input, text{
display: inline-block;
vertical-align: top;
}
input {
flex: 1;
}
text {
width: 90rpx;
color: #FFA004 ;
}
}
小程序封装一个有输入框的modal层组件的更多相关文章
- 小程序封装一个ajax
小程序中,我们一般习惯把提交接口请求的方法放在一个公共js里面.下面是一个简单实现. (1)我们把所有请求的地址都放在一个json里面 var postAddress = { "domin& ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 微信小程序封装storage(含错误处理)
这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({ key:"", success: function (res) { }, fail ...
- 微信小程序把玩(二十三)modal组件
原文:微信小程序把玩(二十三)modal组件 modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件-- ...
- 微信小程序发布一个月,世界并没有什么不同
从某种意义上说,在张小龙身上,最可怕的事情莫过于微信小程序发布一个月,一开始的大红大紫居然渐归沉寂,曾经的风光无限已无人谈起,世界并没有什么不同. 这真像一场噩梦,一切都可怕地颠倒了.一款微信的战略级 ...
- 小程序实践(六):view内部组件排版
涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的 ...
- 微信小程序把玩(二十八)image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- 微信小程序把玩(二十九)video组件
原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...
- 微信小程序把玩(二十四)toast组件
原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其 ...
随机推荐
- C# 很久以前几个常用类
Base64加密解密 using System; using System.Collections.Generic; using System.Linq; using System.Text; nam ...
- Web引用中文个性字体
最近在前端开发时,因为设计的原因,要引用一些特殊字体(otf格式),但是后来发现这些字体文件非常大,平均每个要8mb左右,严重影响了网页效率.经过一番搜索,发现了前端字体压缩工具(只支持utf-8格式 ...
- 从 Quora 的 187 个问题中学习机器学习和NLP
从 Quora 的 187 个问题中学习机器学习和NLP 原创 2017年12月18日 20:41:19 作者:chen_h 微信号 & QQ:862251340 微信公众号:coderpai ...
- mysql 无法远程连接 没有监听端口
centos yum安装mysql: 远程连接完成用户授权和防火墙配置,可还是连接不上. 发现mysql没有监听3306端口. 修改mysql配置文件 vi /etc/my.conf 注释掉以下行,重 ...
- React-Native 之 GD (十四)小时风云榜 及 当前时间操作 及 上一小时、下一小时功能实现
1.小时风云榜 GDHourList.js /** * 小时风云榜 */ import React, { Component } from 'react'; import { StyleSheet, ...
- selinux的设置包括两个部分: 修改安全上下文和修改策略
selinux的设置包括两个部分: 修改安全上下文和修改策略 修改安全上下文: chcon = change context: chcon 修改策略: setsebool 策略就是由很多boo类型的变 ...
- 010-elasticsearch5.4.3【四】-聚合操作【一】-度量聚合【metrics】-min、max、sum、avg、count
一.概述 度量类型聚合主要针对的number类型的数据,需要ES做比较多的计算工作 参考向导:地址 import org.elasticsearch.search.aggregations.Aggre ...
- spring的后置处理器——BeanPostProcessor以及spring的生命周期
后置处理器的调用时机 BeanPostProcessor是spring提供的接口,它有两个方法——postProcessBeforeInitialization.postProcessAfterIni ...
- tensorflow 关于 矩阵 运算 + 符号得含义。 2维 数组 + 1纬数组, 就是每一行都 加一边 1纬数组。 呵呵
小锋子Shawn(403568338) 13:51:23mnist.training.images?墨须(964489899) 13:51:27我的图片是100*100的,该怎么兼容. 小锋子S ...
- Rxjava2不能再发射Null了
RxJava2的最大改变就是不能再流里发射Null了,有人会问发射了就怎么了,答案是你的流会因为NPE断开. 例如下面这段代码因为文件被删了找不到返回null,这时候就不触发下面Consumer的ac ...