1. 程式人生 > >微信小程式開發框架——元件

微信小程式開發框架——元件


    元件的概念,如圖:

    小程式給我們提供的元件,如圖

 八類元件:1.檢視容器元件主要控制頁面內容、檢視容器可以理解為一個盒子在這個盒子裡面可以裝入更小的盒子填滿,這裡提供有5種:

    1、view 是最常用的容器元件;

    2、scroll-view 滾動容器元件;

    3、swiper 輪播容器元件;

    4、movable-view 可支援移動縮放的容器元件;

    5、cover-view 容器元件 和view不同的是 cover-view可以蓋在一些原生元件;如圖


    
    view 容器元件提供有4個屬性:

    1.hove-class view元件有一個點選態的效果,hove-class 就是設定點選態效果按下去的樣式類、通過這個樣式類可以設定點選態(就是手指在按下容器時樣式表現);

    2.hove-stop-propagation 是用來指定可不可以阻止祖先結點也出現這樣一個點選態;

    3.hove-statr-time 是指手指再按下容器時多久會出現這個點選態;

    4.hover-stay-time 是指手指再鬆開容器時後、它的點選態還會保留多久;

    在模擬器中看效果,在index.wxml檔案內、用view 元件在模擬器展示、在view容器內巢狀一個子view、view附容器class name是view-parent-container、設定寬、高為300rpx的值,

    背景顏色為 yellowreen 和 background ;如圖

    在view附容器設定了 hove-class屬性,樣式類、類名是 hover-parent-container 再按下去背景色為白色;

    在view附容器又添了一個子view容器class是 view-container設定寬、高為200rpx的值,背景顏色為chocolate background;

在子view容器通過 hove-stop-propagation、hove-statr-time 、hover-stay-time;

    1~ hover-stay-time 來看它的一個表現,hover-stay-time定義子view容器在手指離開螢幕之後點選態持續的時間為300毫秒;

    2~ hove-statr-time 是指手指再按下螢幕的時候設定500毫秒延遲時間,手指再按下螢幕500毫秒之後點選態才出現;

    3~ hove-stop-propagation 是阻止我們附的view容器是否出現點選態;