微信小程式開發學習筆記[4]

annjeff發表於2019-01-08
微信小程式筆記

微信小程式開發學習筆記[4]

目錄

微信小程式開發學習筆記[4]

一、元件view的使用

二、容器元件常用的佈局屬性

三、子元素屬性

四、scroll-view的使用

五、swiper、swiper-item滑塊容器檢視的使用【組圖輪播】

六、其他元件介紹

6.1、icon元件

6.2、text元件

6.3、image元件

6.4、progress進度條

一、元件view的使用

view是檢視容器，可以存放其他的標籤。view是一個塊級元素，一個佔一行，與div類似。

<!--pages/view/view.wxml-->
<view class="main">
    <view class="item v1"></view>
    <view class="item v2"></view>
    <view class="item v3"></view>
</view>
/* pages/view/view.wxss */
.main{
    width: 100%;
    height: 1000rpx;
    background-color: #EFEFFE
}

.item{
    width: 200rpx;
    height: 100px;
    margin: 10rpx 10rpx;
}

.v1{
    background-color: red;
}
.v2{
    background-color: blue;
}
.v3{
    background-color: yellow;
}

 


二、容器元件常用的佈局屬性

容器佈局的屬性
屬性 屬性說明
flex-direction  設定主軸方向，確定彈性子元素排列方式。row，row-reverse，column，column-reverse 
flex-wrap 當彈性子元素超出彈性容器範國時是否換行。nowrap，wrap，wrap-reverse
 justify-content 主軸上的對齊方式。flex-start[左對齊]，flex-end，center，space-between，space-around
 align-items 側軸上的對齊。flex-start，flex-end，center,baseline，stretch
align-content 側軸上有空白時且有多行時，側軸的對齊方式。flex-start，flex-end，center，space-between，space-around，stretch

彈性盒子：盒子中的內容會自動自適應大小排列放置。

如何將一個容器變成彈性盒子？只需在WXSS檔案中新增 display:flex;新增display:flex後，預設主軸方向為row橫向。

改變主軸方向：

/* pages/view/view.wxss */
.main{
    width: 100%;
    height: 1000rpx;
    background-color: #EFEFFE;
    /*設定為彈性盒子*/
    display:flex;
    /*改變主軸方向為垂直方向逆向*/
    flex-direction: column-reverse;
}

 

三、子元素屬性

子元素屬性
屬性 屬性說明
order 控制彈性容器裡子元素的順序
flex-grow 控制彈性子元素的擴充套件比率
flex-shrink 設定彈性子元素的收縮比率
align-self 允許獨立的彈性子元素覆蓋彈性容器的預設對齊設定（align-items）

通過order屬性修改子元素的順序：

.v1{
    background-color: red;
    order:2;
}
.v2{
    background-color: blue;
    order: 1
}
.v3{
    background-color: yellow;
    order:3;
}

通過flex-grow來擴充套件:比率即各自比重所佔的權重

.v1{
    background-color: red;
    order:2;
    flex-grow: 1;
}
.v2{
    background-color: blue;
    flex-grow: 2;
    order: 1;
}

 

四、scroll-view的使用

屬性
Attribute Type Default Value Attribute Specification
scroll-x Boolean false 允許橫向滾動
scroll-y Boolean false 允許縱向滾動
upper-threshold Number 50 距頂部/左邊多遠時（單位px），觸發scrolltoupper事件
lowwe-threshold Number 50 距底部/右邊多遠時（單位px），觸發scrolltolower事件
scroll-top Number   設定豎向滾動條位置
scroll-left Number   設定橫向滾動條位置
scroll-into-view String   值應為某子元素id（id不能以數字開頭）。設定哪個方向可滾動，則在哪個方向滾動到該元素
bindscrolltoupper EventHandle   滾動到頂部/左邊，會觸發scrolltoupper事件
bindscrolltolower EventHandle   滾動到頂部/左邊，會觸發scrolltolower事件
bindscroll EventHandle   滾動時觸發，event.detail={scrollLeft，scrollTop，scrollHeight，scrolWidth，deltax，delta}

請勿在scroll-view中使用textarea、map、canvas、video 元件。

scroll-into-view的優先順序高於scroll-top

在滾動scroll-view時會阻止頁面回彈，所以在scroll-view中滾動，是無法觸發onPullDownRefresh

例子：垂直滾動

// pages/scrollview/scrollview.js
Page({

    /**
     * 頁面的初始資料
     */
    data: {
        scrollTop:50
    },
    toUpper:function(){
        console.log ("toUpper is called....");
    },
    toLower:function(){
        console.log("toLower is called...");
    },
/* pages/scrollview/scrollview.wxss */
.main{
    width: 100%;
    height: 1000rpx;
    background-color: #EFEFFE;
}
.item{
    width: 400rpx;
    height: 400px;
    margin: 10rpx 10rpx;
}

.v1{
    background-color: red;
}
.v2{
    background-color: blue;
}
.v3{
    background-color: yellow;
}
<!--pages/scrollview/scrollview.wxml-->
<view class="main">
    <scroll-view scroll-y="true" bindscrolltoupper="toUpper" bindscrolltolower="toLower" scroll-top="{{scrollTop}}" style="height:400rpx">
    <view class="item v1"></view>
    <view class="item v2"></view>
    <view class="item v3"></view>
    </scroll-view>
</view>

例子2：通過點選按鈕來控制

Page({

    data: {
        scrollTop:50
    },
    toUpper:function(){
        console.log ("toUpper is called....");
    },
    toLower:function(){
        console.log("toLower is called...");
    },
    setScollTop:function(){
        this.setData({scrollTop:this.data.scrollTop+200})
    },
<view>
    <button bindtap="setScollTop">設定scroll-top屬性</button>
</view>

演示scroll-into-view:

<!--pages/scrollview/scrollview.wxml-->
<view class="main">
    <scroll-view scroll-y="true" bindscrolltoupper="toUpper" bindscrolltolower="toLower" scroll-top="{{scrollTop}}" style="height:400rpx" scroll-into-view="{{scrollIntoView}}">
    <view class="item v1" id="red"></view>
    <view class="item v2" id="green"></view>
    <view class="item v3" id="yellow"></view>
    </scroll-view>
</view>


<view>
    <button bindtap="setScrollIntoView">設定scroll-into-view</button>
</view>
// pages/scrollview/scrollview.js
var views=["red","green","yellow","red"]
Page({

    /**
     * 頁面的初始資料
     */
    data: {
        scrollTop:50,
        scrollIntoView:"red"
    },
    setScrollIntoView:function(){
        for(var i=0;i<views.length;i++){
            if(views[i] == this.data.scrollIntoView){
                console.log(views[i]);
                this.setData({
                    scrollIntoView:views[i+1]
                })
                break;
            }
        }
    },


五、swiper、swiper-item滑塊容器檢視的使用【組圖輪播】

屬性
Attribute Type Default Value Attribute Specification
indicator-dots Boolean false 是否顯示皮膚指示點
autoplay Boolean false 是否自動切換
interval Number 5000 自動切換時間間隔
duration Number 500 滑動動畫時長
vertical Boolean false 滑動方向是否為縱向
bindchange EventHandle   current 改變時會觸發 change事件，event.detail=
{current:current，source:source}

請勿在scroll-view中使用textarea、map、canvas、video元件

scroll-into-view的優先順序高於scroll-top

在滾動scroll-view時會阻止頁面回單，所以在scroll-view中滾動，是無法觸發onPullDownRefresh

若要使用下拉重新整理，請使用頁面的滾動，而不是scroll-view，這樣也能通過點選頂部狀態列回到頁面頂部

<!--pages/swiper/swiper.wxml-->
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' vertical='{{vertical}}'>
    <swiper-item>
        <image src="../../images/yueji.png"></image>
    </swiper-item>
    <swiper-item>
        <image src="../../images/ziluolan.png"></image>
    </swiper-item>
    <swiper-item>
        <image src="../../images/taohua.png"></image>
    </swiper-item>
</swiper>

// pages/swiper/swiper.js
Page({

    /**
     * 頁面的初始資料
     */
    data: {
        indicatorDots:true,
        autoplay:true,
        interval:2000
    },


六、其他元件介紹

6.1、icon元件

icon屬性
Attribute Type Default value Attribute specication
type String   icon的型別，有效值：success，success no circle，info，warn，waiting，cancel，download，search，clear
size Number 23 icon的大小,單位px
color Color   icon的顏色同css的顏色 
<!--pages/icon/icon.wxml-->
<!--使用迴圈將圖表都讀取出來 -->
<icon wx:for="{{types}}" type="{{item}}">

</icon>
// pages/icon/icon.js
Page({

    data: {
        types:["success","success no circle","info","warn","waiting","cancel","download","search","clear"]
    },

6.2、text元件

text不是容器，這是與view的區別。

文字
Attribute Type Default Value Attribute Specification
selectable Boolean false 文字是否可選
decode Boolean false 是否解碼

decode可以解析的有&nbsp；&lt；&gt&amp:&apos；&ensp；&emsp；

除了文字節點以外的其他節點都無法長按選中。

<!--pages/text/text.wxml-->
<text selectable='true'>pages/text/text.wxml</text>

6.3、image元件

The attribute of image
Attribute Type Default Value Attribute Specification
src String   圖片資源地址
mode String scaleToFill 圖片剪下縮放模式
binderror HandEvent   當錯誤發生時，釋出到AppService的事件名，事件物件event.detail={errMsg:'something wrong}
bindload HandEvent   當圖片載入完畢時，釋出到AppService的事件名，事件物件event.detail={height:'圖片高度px'，width:'圖片寬度px}

6.4、progress進度條

The Attribute of progress
Attribute Type Default Value Attribute Specification
percent Float   0-100百分比
show-info Boolean false 是否在進度條右側顯示百分比
stroke-width Number 6 進度條的寬度，單位px
color color #09BB07 進度條顏色
active Boolean false 進度條從左往右的動畫
active-mode String backwards backwards：動畫從頭播；forwards：動畫從上次結束點接著播 
<!--pages/progress/progress.wxml-->
<progress percent='70' show-info='true' stroke-width='17px' color='#09BB07' active='true' active-mode='backwards'></progress>

 

相關文章