「小程序JAVA实战」小程序的基础组件(24)
转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/
来说下 ,小程序的基础组件。源码:https://github.com/limingios/wxProgram.git 中的No.11
基础组件
- icon图标组件
- rich-text 富文本组件
- text 文本组件
- progress 进度条组件
icon图标组件
- 官方介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
- 演示用例
<!--icon.wxml-->
<view class="container">
<icon type='success' color='red' size='55'></icon>
<icon type='success_no_circle' size='55'></icon>
<icon type='info' size='55'></icon>
<icon type='warn' size='55'></icon>
<icon type='waiting' size='55'></icon>
<icon type='cancel' size='55'></icon>
<icon type='download' size='55'></icon>
<icon type='search' size='55'></icon>
<icon type='clear' size='55'></icon>
</view>
text组件
- 官方介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/text.html
- 演示用例
text.html
<!--text.wxml-->
<view>
<text selectable='{{true}}'>欢迎关注:编程坑太多</text>
</view>
<view>
<text>欢迎关注:编程坑太多</text>
</view>
<view>
<text space='{{true}}' decode="true">个人博客: idig8.com</text>
</view>
<view>
<text space='{{false}}'>个人博客: idig8.com</text>
</view>
<view>
<text decode="true">个人博客:\t\nidig8.com</text>
</view>
rich-text 富文本
- 官方介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
- 演示用例
rich-text.html
<!--rich-text.wxml-->
<view>
<rich-text nodes="{{mycontentStr}}"> </rich-text>
<rich-text nodes="{{mycontentArray}}"> </rich-text>
</view>
rich-text.js
//rich-text.js
//获取应用实例
const app = getApp()
Page({
data:{
mycontentStr: '<img class="s_lg_img_gold_show" src="//www.baidu.com/img/bd_logo1.png" width="270" height="129" >',
mycontentArray:[
{
name:"img",
attrs:{
class:"s_lg_img_gold_show",
src:"//www.baidu.com/img/bd_logo1.png",
width:"270",
height:"129"
}
}
]
}
})
rich-text.wxss
/**icon.wxss**/
.s_lg_img_gold_show{
width:600rpx;
}
使用富文本需要特别注意
progress 进度条
- 官方介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
- 演示用例
rich-text.html
<!--progress.wxml-->
<view>
<progress percent="70" show-info="{{true}}" stroke-width="20" color="red" active="{{true}}"></progress>
<progress percent="{{mypercent}}" show-info="{{true}}" stroke-width="20" color="red" active="{{true}}" active-mode='forwards'></progress>
<view bindtap='addpercent' >增加进度条百分比</view>
</view>
//progress.js
//获取应用实例
const app = getApp()
Page({
data:{
mypercent:15
},
addpercent:function(){
var newpercent = this.data.mypercent+20;
this.setData({
mypercent: newpercent
})
}
})
PS:关于基础组件部分就是这4块,从下次开始咱们一起了解下表单组件
「小程序JAVA实战」小程序的基础组件(24)的更多相关文章
- 「小程序JAVA实战」小程序的表单组件(25)
转自:https://idig8.com/2018/08/18/xiaochengxujavashizhanxiaochengxudebiaodanzujian25/ 来说下 ,小程序的基础组件.源码 ...
- 「小程序JAVA实战」小程序的组件(23)
转自:https://idig8.com/2018/08/11/xiaochengxu-chuji-23/ 开始了解下小程序的组件.源码:https://github.com/limingios/wx ...
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的举报功能开发(68)
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的关注功能(65)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
- 「小程序JAVA实战」小程序的springboot后台拦截器(61)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...
随机推荐
- 实战maven私有仓库三部曲之一:搭建和使用
在局域网内搭建maven私有仓库,可避免每次都从中央仓库下载公共jar包,另外将A模块作为二方库发布到私有仓库后,B模块可以很方便的引用,今天我们就来实战maven私有仓库的搭建和使用: 原文地址:h ...
- 【Python爬虫学习笔记(2)】正则表达式(re模块)相关知识点总结
1. 正则表达式 正则表达式是可以匹配文本片段的模式. 1.1 通配符 正则表达式能够匹配对于一个的字符串,可以使用特殊字符创建这类模式.(图片来自cnblogs) 1.2 特殊字符的转义 由于在正则 ...
- 语义版本号(Semantic Versioning)
版本号格式不陌生吧,.NET 传统的版本号格式类似这样 1.5.1254.0.本文将推荐一种新的版本号格式——语义版本号,格式类似这样 1.4.6-beta.我推荐语义版本号是因为这样的版本号自包含语 ...
- ASP.NET Core 中的SEO优化(4):自定义视图路径及主题切换
系列回顾 <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图> < ...
- 《selenium2 python 自动化测试实战》(20)——Selenium工具介绍
(一)Selenium IDE Firefox的一个插件,有助于我们理解测试框架.在附加组件里搜索下载,一般搜的结果里前几个都不是,得点那个查看更多才行,找到这个: 安装以后浏览器工具栏会有: 安装好 ...
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
- nginx 启用http2 https 无法访问的问题
原因: 1. openssl 版本过低 解决方法:进行升级 yum update openssl 2.ssl_ciphers 配置有问题 解决方法:修改为 ssl_ci ...
- 【转】Linux export 命令
原文网址:http://mymobile.iteye.com/blog/1407601 Linux export 命令 功能说明: 设置或显示环境变量.(比如我们要用一个命令,但这个命令的执行文件不在 ...
- bzoj2442[Usaco2011 Open]修剪草坪——单调队列优化
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2442 考虑记录前 i 个.末尾 j 个连续选上的最大值.发现时空会爆. 又发现大量的转移形如 ...
- (转)如何获得当前ListVIew包括下拉的所有数据?
ListView listView = activity.getListView();获取的仅仅是当前屏幕显示的list,但是具有下拉信息,不在当前屏幕,但是下拉显示的数据无法或得到.谁知道如何获得当 ...