基础内容text:官方文档

Demo Code

var initData = 'this is first line\nthis is second line'
var extraLine = [];
Page({
data: {
text: initData
},
add: function(e) {
extraLine.push('other line')
this.setData({
text: initData + '\n' + extraLine.join('\n')
})
},
remove: function(e) {
if (extraLine.length > 0) {
extraLine.pop()
this.setData({
text: initData + '\n' + extraLine.join('\n')
})
}
}
})

JS

<view class="btn-area">
<view class="body-view">
<text>{{text}}</text>
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>
</view>
</view>

WXML

.btn-area{
font-family:Verdana, Geneva, Tahoma, sans-serif;
padding: 0 10px 0 10px;
}
.body-view button{
margin-top :10px;
}

WXSS

微信小程序组件text的更多相关文章

  1. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  2. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  3. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  4. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  5. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  6. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  7. 微信小程序组件通信入门及组件生命周期函数

    组件生命周期函数链接地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.h ...

  8. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  9. 微信小程序组件封装及调用-原生

    封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会 ...

随机推荐

  1. Centos6.X 安装MongoDb

    1.查看linux版本,之所以查看linux版本,是因为centos7和以前版本用的防火墙不一样,安装完mongodb后,需要关闭防火墙(或者其他方法,专业运维人员使用,我们这里为简单,直接关闭即可) ...

  2. flask 邮箱配置

    http://blog.csdn.net/stan_pcf/article/details/51098126 先进入邮箱设置 POP3/SMTP/IMAP 下面代码来自知乎 https://www.z ...

  3. JQ实现小火箭效果

    点击返回顶部以动画方式返回 $(function(){         $(window).scroll(function(){             //当滚动距离超过50后,显示按钮:      ...

  4. 再谈Unity调用Android的Activity

    这段时间在研究Unity4.3开发环境下.怎样调用由Android SDK4.4.2写的Activity.參考了非常多网上的博客.百度出了几十篇大部分都是转载雨松MOMO的,这里必须向雨松MOMO表示 ...

  5. 尼康D90多点对焦

    11点对焦 上市时间 2008 类型 单反数码相机 对焦方式 单区域AF:在选择区域内只对焦于目标可以从11个AF点传感器中的任意一个中选择 动态区域AF:对焦于选择区域的目标上,如果目标离开原来位置 ...

  6. Eclipse用法和技巧

    http://blog.csdn.net/ts1122/article/category/1385337/2

  7. JMeter学习-021-JMeter 定时器的应用

    定时器类型 下面我们看下jmeter提供了哪些定时器组件: 固定定时器 高斯随机定时器 Uniform Random Timer Synchronizing Timer Poisson Random ...

  8. iOS App 审核被拒的原因搜罗

    本文转载至 http://ju.outofmemory.cn/entry/108500   iOS app 审核 1.程序有重大bug,程序不能启动,或者中途退出. 2.绕过苹果的付费渠道,我们之前游 ...

  9. 初步了解 cURL

    今天需要用PHP模拟post请求,查了查资料,了解到cURL.看了一篇博客,写的很详细,就转载了,与大家分享.[原文链接] 什么是cURL?可能还有很多同学没有听说过这个工具,我先来给大家简单介绍下什 ...

  10. Appcompat实现Action Bar的兼容性处理

    Appcompat实现Action Bar时,如果使用到split action bar或者Navigating Up with the App Icon需要考虑兼容性.下面介绍下split acti ...