textarea是官方的原生组件,用于多行输入

简单的例子,监听文本内容、长度,以及设置最大可输入文本长度

wxml

 <view class='textarea-Style'>
<textarea placeholder='请输入文字' value='{{contentStr}}' bindinput="getWords" maxlength='{{maxTextLen}}'></textarea>
<view class='contentNumStyle'>{{textLen}}/{{maxTextLen}}</view>
</view>
wxss 

.contentNumStyle {
display: flex;
justify-content: flex-end;
padding: %;
font-size: 14px;
color: #c0c6d3;
} .textarea-Style {
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
color: #33496d;
width: %;
}
js

/**
* 页面的初始数据
*/
data: {
// 最大字符数
maxTextLen: ,
// 当前文本长度
textLen: ,
// 文本内容
contentStr: "",
},
getWords(e) {
let page = this;
// 设置最大字符串长度(为-1时,则不限制)
let maxTextLen = page.data.maxTextLen;
// 文本长度
let textLen = e.detail.value.length; page.setData({
maxTextLen: maxTextLen,
textLen: textLen,
contentStr: e.detail.value
});
},

--------------------------------------------------------------------------------------

小程序实践(一):主页tab选项实现

小程序实践(二):swiper组件实现轮播图效果

小程序实践(三):九宫格实现及item跳转

小程序实践(四):动态控制组件的显示/隐藏

小程序实践(五):for循环绑定item的点击事件

小程序实践(六):view内部组件排版

小程序实践(七):页面间传值

小程序实践(八):验证码倒计时功能

小程序实践(九):返回到上一个界面并传值回去

小程序实践(十):textarea实现简单的编辑文本界面

小程序实践(十一):showModal的使用

小程序实践(十二):七牛云上传图片

小程序实践(十):textarea实现简单的编辑文本界面的更多相关文章

  1. 小程序实践(十一):showModal的使用

    显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...

  2. 小程序实践(六):view内部组件排版

    涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的 ...

  3. 小程序实践(五):for循环绑定item的点击事件

    微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...

  4. 小程序实践(三):九宫格实现及item跳转

    效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. --------------------------------------------------------------- ...

  5. 小程序实践(二):swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  6. 小程序实践(一):主页tab选项实现

    官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: ----------------------------------------------------- ...

  7. 【node+小程序+web端】简单的websocket通讯

    [node+小程序+web端]简单的websocket通讯 websoket是用来做什么的? 聊天室 消息列表 拼多多 即时通讯,推送, 实时交互 websoket是什么 websocket是一个全新 ...

  8. 微信小程序入门之构建一个简单TODOS应用

    最近开始了解微信小程序,虽然小程序已经出了很久了,刚出的那段时间很火,看到很多关于小程序的技术文章,不过现在似乎没那么火了,anyway,我们还是可以学习下的. 一.了解微信小程序 1.理念:小程序开 ...

  9. mpvue 转小程序实践总结

    介绍 Mpvue 是一个使用 Vue.js 开发小程序的前端框架.  基础介绍 框架基于 Vue.js 核心,修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序 ...

随机推荐

  1. Python网络编程之线程,进程

    一. 线程: 基本使用 线程锁 线程池 队列(生产者消费者模型) 二. 进程:  基本使用  进程锁 进程池 进程数据共享 三. 协程: gevent greenlet 四. 缓存: memcache ...

  2. Windows 7专业版安装VS2005与WinCE6.0开发环境

    近期更新了自己的小黑从XP更新到WIN7专业版,我花了两天时间验证了下列软件安装在WIN7 PRO是完全兼容的. 1:2011年最新更新的SourceInsight3.50.0066版本,这个是支持W ...

  3. Javascript多线程引擎(七)

    Javascript多线程引擎(七)--synchronized关键字 经过两天的努力, 今天synchronzied关键字终于支持了, 如下是测试代码 thread() 是一个开启新线程的API, ...

  4. Java中&quot;==&quot; 和 equals 的区别

    "=="比较的是地址值 equals 比较的是内容 看例子能够更加清晰的理解 eg: String s1="java",s2="java"; ...

  5. 11.2.0.4 sql*loader/oci direct load导致kpodplck wait before retrying ORA-54

    昨天晚上9点多,有个环境开发说特别慢,早上上去看下了,如下: 导致性能的是一个统计的sql执行计划走错了,主要不是因为kpodplck wait before retrying ORA-54,不过这个 ...

  6. java实验报告五

    一.实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 二.实验基础: IP和端口:IP是用来标示计算机,而端口是用来标示某个计算机上面的特定应用.至于它们的 ...

  7. SpringBoot tomcat

    该文的前提是已经可以在控制台运行成功,有些时候想放在tomcat里运行 大致分为如下几步 1.配置文件更改 <dependency> <groupId>org.springfr ...

  8. 学记笔记 $\times$ 巩固 &#183; 期望泛做$Junior$

    最近泛做了期望的相关题目,大概\(Luogu\)上提供的比较简单的题都做了吧\(233\) 好吧其实是好几天之前做的了,不过因为太颓废一直没有整理-- \(Task1\) 期望的定义 在概率论和统计学 ...

  9. Hibernate5笔记8--Hibernate事务相关内容

    Hibernate事务相关内容: (1) 事务四大特性(简称ACID): (1)原子性(Atomicity) 事务中的全部操作在数据库中是不可分割的,要么全部完成,要么均不执行. (2)一致性(Con ...

  10. html转pdf工具:wkhtmltopdf.exe

    百度云下载:http://pan.baidu.com/s/1dEX0h93