微信小程序view與scroll-view組件的使用介紹

更新時間：2022年10月09日 10:34:58 作者：honker707

小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以使用組件快速搭建出頁面結(jié)構(gòu)，這篇文章主要介紹了微信小程序view與scroll-view組件的使用

小程序組件的分類

小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以使用組件快速搭建出頁面結(jié)構(gòu)，官方把小程序里的組件分為了9大類，分別是

①視圖容器

②基礎(chǔ)內(nèi)容

③表單組件

④導(dǎo)航組件

⑤媒體組件

⑥map地圖組件

⑦canvas畫布組件

⑧開放能力

⑨無障礙訪問

常見的視圖容器類組件

①view

普通視圖區(qū)域

類似于HTML中的div，是一個塊級元素

常用于實現(xiàn)頁面的布局效果

②scroll-view

可滾動的視圖區(qū)域

常用于實現(xiàn)滾動列表效果

③swiper和swiper-item

輪播圖容器組件和輪播圖item組件

view組件的基本使用

在hacker頁面實現(xiàn)如圖所示的flex橫向布局效果：

hacker.wxml

<!--pages/hacker/hacker.wxml-->
<view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

hacker.wxss

/* pages/hacker/hacker.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align:center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color:lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightskyblue;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}
.container1{
    display: flex;
    justify-content: space-around;
}

scroll-view組件的基本使用

在hacker頁面實現(xiàn)如圖所示的縱向滾動效果：

hacker.wxml

<!--pages/hacker/hacker.wxml-->
<!--scroll-y屬性：允許縱向滾動-->
<!--scroll-x屬性：允許橫向滾動-->
<!--注意：使用豎向滾動時必須給scroll-view一個固定高度-->
<scroll-view class="container1"scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

hacker.wxss

/* pages/hacker/hacker.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align:center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color:lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightskyblue;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}
.container1{
    width: 100px;
    /* 給 scroll-view 固定高度 */
    height: 100px;
}

到此這篇關(guān)于微信小程序view與scroll-view組件的使用介紹的文章就介紹到這了,更多相關(guān)小程序view與scroll-view組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: