微信小程序之入門篇（一）
微信小程序之注冊篇（二）
微信小程序之開發初體驗（三）——開發工具使用和目錄結構
微信小程序之生命周期（四）
微信小程序之數據綁定（五）
微信小程序之觸控事件（六）
微信小程序之基礎組件篇——視圖容器（七）
微信小程序之基礎組件篇——基礎內容（八）
微信小程序之基礎組件篇——表單組件（九）
微信小程序之基礎組件篇——導航組件（十）
微信小程序之基礎組件篇——媒體組件（十一）
微信小程序之API篇——豆瓣圖書搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）
本篇文章將介紹小程序的基礎組件——基礎內容。
基礎內容分為三大組件:
- icon——圖標
- text——文本
- progress——進度條
icon
icon屬性
index.wxml
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="45" color="{{item}}"/>
</block>
</view>
index.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'
]
}
})
icon效果圖
text
index.wxml
<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>
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')
})
}
}
})
text效果圖
progress
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />
progress效果圖
