小程式學習之檢視元件和基礎元件
什麼是元件?
- 元件是檢視層的基本組成單元。
- 元件自帶一些功能與微信風格一致的樣式。
- 多個元件構成一張試圖頁面
- 每個元件都包含一些公用屬性(class、id、style...)
- 一個元件通常包括
開始標籤
和結束標籤
,屬性
用來修飾這個元件,內容
在兩個標籤之內。
一、基礎元件分為以下七大類:
1、檢視元件
1.1、view
view元件的常用屬性:
- hover-class:指定按下去的樣式類
- hover-start-time:按住後多久出現點選態,單位毫秒
- hover-stay-time:手指鬆開後點擊態保留時間,單位毫秒
<view hover-class='d' hover-start-time='10' hover-stay-time='2000'>內容</view>
1.2、scroll-view(可滾動檢視區域)
- scroll-view元件的常用屬性:
- scroll-view:允許縱向滾動(true / false)
- scroll-top:設定豎向滾動條位置(Number)
- scroll-with-animation:在設定滾動條位置時使用動畫過渡(true / false)
- enable-back-to-top:iOS點選頂部狀態列、安卓雙擊標題欄時,滾動條返回頂部,只支援豎向(得在真機上使用)(true / false)
- upper-threshold:距頂部/左邊多遠時(單位px),觸發 scrolltoupper 事件,預設值是50px
- lower-threshold
- scroll-into-view:值應為某子元素id(id不能以數字開頭)。設定哪個方向可滾動,則在哪個方向滾動到該元素(id名)
- bindscrolltoupper:滾動到頂部/左邊,會觸發 scrolltoupper 事件(scrolltoupper)
- bindscrolltolower:滾動到底部/右邊,會觸發 scrolltolower 事件(scrolltolower )
- bindscroll:滾動時觸發
- 豎向可滾動區域
<scroll-view scroll-y="true" scroll-top="50" scroll-with-animation="true" bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" upper-threshold="0" lower-threshold="0" enable-back-to-top="true" scroll-into-view = 'c' enable-back-to-top='true' bindscroll="scroll"> <view id='a' class='a size'>a</view> <view id='b' class='b size'>b</view> <view id='c' class='c size'>c</view> <view id='d' class='d size'>d</view> <view id='e' class='e size'>e</view> </scroll-view>
橫向可滾動區域
<scroll-view class='container' scroll-x="true" style='margin-top:250rpx;' scroll-left='350'> <view id='a' class='a size'>a</view> <view id='b' class='b size'>b</view> <view id='c' class='c size'>c</view> <view id='d' class='d size'>d</view> <view id='e' class='e size'>e</view> </scroll-view>
橫向scroll-view需要在樣式裡設定:white-space: nowrap;和display: inline-block;
1.3、swiper(滑塊檢視容器)
實現跟輪播圖一樣的效果
swiper元件的常用屬性:
- indicator-dots:是否顯示面板指示點(預設false)
- indicator-color:指示點顏色(預設rgba(0, 0, 0, .3))
- autoplay:是否自動切換(預設false)
- duration:滑動動畫時長(預設500毫秒)
- interval:自動切換時間間隔
注意:swiper裡只可放置<swiper-item/>
元件,否則會導致未定義的行為。
swiper-item
僅可放置在<swiper/>
元件中,寬高自動設定為100%。
swipter-item屬性:item-id
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})
1.3、movable-area和movable-view
movable-area:mova-view的可以的區域
movable-view:可移動的檢視容器,在頁面中可以拖拽滑動
movable-view的常用屬性:
- direction:movable-view的移動方向,屬性值有all、vertical、horizontal、none
- inertia:movable-view是否帶有慣性(false / true)
- out-of-bounds:超過可移動區域後,movable-view是否還可以移動(false / true)
- x:定義y軸方向的偏移,如果y的值不在可移動範圍內,會自動移動到可移動範圍;改變y的值會觸發動畫
- y:同 x
- damping:阻尼係數,用於控制x或y改變時的動畫和過界回彈的動畫,值越大移動越快(預設值是20)
- friction:摩擦係數,用於控制慣性滑動的動畫,值越大摩擦力越大,滑動越快停止;必須大於0,否則會被設定成預設值(預設值是2)
- bindchange:拖動過程中觸發的事件
- scale:是否支援雙指縮放,預設縮放手勢生效區域是在movable-view內
- bindscale:縮放過程中觸發的事件
<movable-area class='father-size'>
<movable-view class='size d' direction='all' inertia='false' out-of-bounds='false' x='50' y='100' damping='20' friction='2' bindchange='change' scale='true' bindscale='scale'>
</movable-view>
</movable-area>
Page({
data:{
},
change:function(){
// console.log('我被移動了...')
},
scale:function(){
console.log('我被縮放了...')
}
})
2、基礎元件(內容)
2.1、icon(圖示)
icon的屬性:
- type:icon的型別,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
- size:icon的大小,單位px(預設值是23,注意不用寫單位)
- color:icon的顏色,同css的color
示例:
<icon type='success' size='66'></icon>
<icon type='success_no_circle' size='66'></icon>
<icon type='info' size='66'></icon>
<icon type='warn' size='66'></icon>
<icon type='waiting' size='66'></icon>
<icon type='cancel' size='66'></icon>
<icon type='download' size='66'></icon>
<icon type='search' size='66'></icon>
<icon type='clear' size='66'></icon>
<view class='group'>
<block wx:for='{{iconsize}}'>
<icon type='success' size='{{item}}'></icon>
</block>
</view>
<view class='group'>
<block wx:for='{{icontype}}'>
<icon type='{{item}}' size='30'></icon>
</block>
</view>
<view class='group'>
<block wx:for='{{iconcolor}}'>
<icon type='success' size='30' color='{{item}}'></icon>
</block>
</view>
js程式碼:
Page({
data:{
iconsize:[20,30,40,50,60,70],
icontype: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear'],
iconcolor:['red','green','blue','yellow','grey','pink','purple']
},
})
2.2、text(文字)
屬性:
selectable:文字是否可選(預設false)
space:顯示連續空格(這個屬性最後顯示出來的是一個空格,與屬性說明有出入)
decode:是否解碼(可以解析的有
<
>
&
'
 
  ,將其顯示為' ' , '<' ,'>' , ’&' , ' ‘ '’
)
2.3、rich-text(富文字)
屬性:
屬性 | 型別 | 預設值 | 說明 | 最低版本 |
---|---|---|---|---|
nodes | Array / String | [] | 節點列表 / HTML String | 1.4.0 |
nodes 屬性推薦使用 Array 型別,由於元件會將 String 型別轉換為 Array 型別,因而效能會有所下降
nodes
現支援兩種節點,通過type來區分,分別是元素節點和文字節點,預設是元素節點,在富文字區域裡顯示的HTML節點
元素節點:type = node
屬性 | 說明 | 型別 | 必填 | 備註 |
---|---|---|---|---|
name | 標籤名 | String | 是 | 支援部分受信任的HTML節點 |
attrs | 屬性 | Object | 否 | 支援部分受信任的屬性,遵循Pascal命名法 |
children | 子節點列表 | Array | 否 | 結構和nodes一致 |
示例:
wxml程式碼
<rich-text nodes='{{mycontent}}'></rich-text>
<rich-text nodes='{{mycontent2}}'></rich-text>
js程式碼
Page({
data:{
mycontent:'<img width="300" height="90" src="//img-ads.csdn.net/2018/201809111436174642.png">',
mycontent2:[{
name:'img',
attrs:{
width: '300',
height: '90',
src: '//img-ads.csdn.net/2018/201809111436174642.png'
},
}]
},
})
mycontent和mycontent2使用兩種形式來繫結內容
2.4、progress(進度條)
屬性名 | 型別 | 預設值 | 說明 | 最低版本 |
---|---|---|---|---|
percent | Float | 無 | 百分比0~100 | |
show-info | Boolean | false | 在進度條右側顯示百分比 | |
stroke-width | Number | 6 | 進度條線的寬度,單位px | |
color | Color | #09BB07 | 進度條顏色 (請使用 activeColor) | |
activeColor | Color | 已選擇的進度條的顏色 | ||
backgroundColor | Color | 未選擇的進度條的顏色 | ||
active | Boolean | false | 進度條從左往右的動畫 | |
active-mode | String | backwards | backwards: 動畫從頭播;forwards:動畫從上次結束點接著播 |
<progress percent='35' show-info='{{true}}' stroke-width='20' activeColor='yellow' backgroundColor='grey'></progress>
<progress percent='{{mypercent}}' show-info='{{true}}' stroke-width='20' activeColor='red' backgroundColor='grey' active='true' active-mode='forwards'></progress>
<view bindtap='addProgress'>點選</view>
Page({
data:{
mypercent: 35,
},
addProgress:function(){
var newPercent = this.data.mypercent+20;
this.setData({
mypercent: newPercent,
})
}