微信小程序基础之常用控件text、icon、progress、button、navigator
2016-12-05 12:14
645 查看
今天展示一下基础控件的学习开发,希望对大家有所帮助,转载请说明~
首先延续之前的首页界面展示,几个跳转navigator的使用,然后是各功能模块的功能使用
一、text展示
使用按钮,进行文字的添加与减少,代码如下:
<!--.wxml-->
<view class="viewTitle">
<text class="titleName">text展示</text>
</view>
<view class="btn-area">
<view class="body-view">
<text>{{text}}</text>
<button bindtap="add">添加文字</button>
<button bindtap="remove">减少文字</button>
</view>
</view>
JS交互操作:
//初始化一个文字参数
var initText = '这是第一个文字\n这是第二个文字'
Page({
data: {
text: initText
},
//初始化一个空的文字串
extraLine: [],
//添加按钮点击事件
add: function(e) {
//在文字串中添加文字,push
this.extraLine.push('添加的其他文字')
//设置数据
this.setData({
text: initText + '\n' + this.extraLine.join('\n')
})
},
//减少按钮点击事件
remove: function(e) {
//判断文字串是否大于0,如果大于0,减少,反之,不操作
if (this.extraLine.length > 0) {
//在文字串中减少文字,pop
this.extraLine.pop()
//设置数据
this.setData({
text: initText + '\n' + this.extraLine.join('\n')
})
}
}
})
二、icon展示,显示系统自带的样式,同时可以修改图标的大小
<!--.wxml-->
<view class="viewTitle">
<text class="titleName">icon展示</text>
</view>
<view class="group">
<view>icon大小样式</view>
<!--可以使用wx:for-index指定数组当前下标的变量名,
wx:for用在<blcok/>标签上,以渲染一个包含多节点的结构块(如:多控件)-->
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<view>icon类型</view>
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</view>
<view class="group">
<view>icon颜色样式</view>
<block wx:for="{{iconColor}}">
<icon type="success" size="45" color="{{item}}"/>
</block>
</view>
JS交互操作:
//.js
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'
]
}
})
三、progress展示,进度条的样式设计
<!--.wxml-->
<view class="viewTitle">
<text>progress进度条展示</text>
</view>
<view class="section section_gap">
<!--显示百分比的样式-->
<progress percent="20" show-info/>
<!--动画显示的样式-->
<progress percent="40" active/>
<!--设置宽度的样式-->
<progress percent="60" stroke-width="10"/>
<!--设置颜色的样式-->
<progress percent="80" color="#10AEFF"/>
</view>
四、navigator导航展示:分两种形式,1.跳转到新的界面,2.当前界面跳转
<view class="viewTitle">
<text class="titleName">navigator展示</text>
</view>
<view class="viewName" style="height:100px">
<navigator url="OnePage" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="TwoPage"
redirect hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
</view>
五、button按钮展示不同样式,设计方式
<!--pages/index/Component/Button/Button.wxml-->
<view class="viewTitle">
<text class="titleName">button展示</text>
</view>
<view class="button-wrapper">
<button type="default" size="{{defaultSize}}" loading="{{loading}}"
plain="{{plain}}" disabled="{{disabled}}" bindtap="default">默认样式
</button>
</view>
<view class="button-wrapper">
<button type="primary" size="{{primarySize}}" loading="{{loading}}"
plain="{{plain}}" disabled="{{disabled}}" bindtap="primary">主要样式
</button>
</view>
<view class="button-wrapper">
<button type="warn" size="{{warnSize}}" loading="{{loading}}"
plain="{{plain}}" disabled="{{disabled}}" bindtap="warn">警告样式
</button>
</view>
<view class="button-wrapper">
<button bindtap="setDisabled">点击设置以上按钮不可点击</button>
</view>
<view class="button-wrapper">
<button bindtap="setPlain">点击设置以上按钮plain样式</button>
</view>
<view class="button-wrapper">
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
</view>
效果图展示:源码下载:https://github.com/hbblzjy/WX-text-icon-progress-button-navigator
首先延续之前的首页界面展示,几个跳转navigator的使用,然后是各功能模块的功能使用
一、text展示
使用按钮,进行文字的添加与减少,代码如下:
<!--.wxml-->
<view class="viewTitle">
<text class="titleName">text展示</text>
</view>
<view class="btn-area">
<view class="body-view">
<text>{{text}}</text>
<button bindtap="add">添加文字</button>
<button bindtap="remove">减少文字</button>
</view>
</view>
JS交互操作:
//初始化一个文字参数
var initText = '这是第一个文字\n这是第二个文字'
Page({
data: {
text: initText
},
//初始化一个空的文字串
extraLine: [],
//添加按钮点击事件
add: function(e) {
//在文字串中添加文字,push
this.extraLine.push('添加的其他文字')
//设置数据
this.setData({
text: initText + '\n' + this.extraLine.join('\n')
})
},
//减少按钮点击事件
remove: function(e) {
//判断文字串是否大于0,如果大于0,减少,反之,不操作
if (this.extraLine.length > 0) {
//在文字串中减少文字,pop
this.extraLine.pop()
//设置数据
this.setData({
text: initText + '\n' + this.extraLine.join('\n')
})
}
}
})
二、icon展示,显示系统自带的样式,同时可以修改图标的大小
<!--.wxml-->
<view class="viewTitle">
<text class="titleName">icon展示</text>
</view>
<view class="group">
<view>icon大小样式</view>
<!--可以使用wx:for-index指定数组当前下标的变量名,
wx:for用在<blcok/>标签上,以渲染一个包含多节点的结构块(如:多控件)-->
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<view>icon类型</view>
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</view>
<view class="group">
<view>icon颜色样式</view>
<block wx:for="{{iconColor}}">
<icon type="success" size="45" color="{{item}}"/>
</block>
</view>
JS交互操作:
//.js
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'
]
}
})
三、progress展示,进度条的样式设计
<!--.wxml-->
<view class="viewTitle">
<text>progress进度条展示</text>
</view>
<view class="section section_gap">
<!--显示百分比的样式-->
<progress percent="20" show-info/>
<!--动画显示的样式-->
<progress percent="40" active/>
<!--设置宽度的样式-->
<progress percent="60" stroke-width="10"/>
<!--设置颜色的样式-->
<progress percent="80" color="#10AEFF"/>
</view>
四、navigator导航展示:分两种形式,1.跳转到新的界面,2.当前界面跳转
<view class="viewTitle">
<text class="titleName">navigator展示</text>
</view>
<view class="viewName" style="height:100px">
<navigator url="OnePage" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="TwoPage"
redirect hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
</view>
五、button按钮展示不同样式,设计方式
<!--pages/index/Component/Button/Button.wxml-->
<view class="viewTitle">
<text class="titleName">button展示</text>
</view>
<view class="button-wrapper">
<button type="default" size="{{defaultSize}}" loading="{{loading}}"
plain="{{plain}}" disabled="{{disabled}}" bindtap="default">默认样式
</button>
</view>
<view class="button-wrapper">
<button type="primary" size="{{primarySize}}" loading="{{loading}}"
plain="{{plain}}" disabled="{{disabled}}" bindtap="primary">主要样式
</button>
</view>
<view class="button-wrapper">
<button type="warn" size="{{warnSize}}" loading="{{loading}}"
plain="{{plain}}" disabled="{{disabled}}" bindtap="warn">警告样式
</button>
</view>
<view class="button-wrapper">
<button bindtap="setDisabled">点击设置以上按钮不可点击</button>
</view>
<view class="button-wrapper">
<button bindtap="setPlain">点击设置以上按钮plain样式</button>
</view>
<view class="button-wrapper">
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
</view>
效果图展示:源码下载:https://github.com/hbblzjy/WX-text-icon-progress-button-navigator
相关文章推荐
- 微信小程序基础之常用控件text、icon、progress、button、navigator
- 【微信小程序笔记-4】组件-基础内容(icon、text、progress)
- 微信小程序icon,text,progress,button,checkbox,form
- 微信小程序icon,text,progress标签的测试
- android内部培训视频_第三节 常用控件(Button,TextView,EditText,AutocompleteTextView)
- 微信小程序 Button按钮与Icon图标
- 「微信小程序免费辅导教程」24,基础内容组件icon的使用探索与7月26日微信公众平台的更新解读
- ImageButton、Button、TextView、EditText等一些常用控件的属性(持续更新)
- 微信小程序基础之交互操作控件
- 【微信小程序】button按钮控件的演示
- Android基本常用控件的介绍TextView EditText Button Menu
- 微信小程序基础之input输入框控件
- 微信小程序基础之试图控件View、ScrollView、Swiper
- TextView ,EditText,Button ,Menu四个常用控件 的使用方法
- 2.Android基础:常见控件----->EditText、Button
- 微信小程序基础之input输入框控件
- Android 第五课 常用控件的使用方法(TextView、Button、EditView、 ImageView、 ProgressBar、 ProgressDialog等)
- 常用控件的使用的方法(TextView、Button、EditText、ImageView、ProrgressBar)
- 微信小程序常用表单控件
- wxPython常用控件--wx.Font,wx.StaticText,wx.StaticBitmap,wx.Button,wx.TextCtrl