如何使用小程序視圖容器組件
發(fā)布時(shí)間：
2022-11-08
訪問(wèn)量：
0
在上一篇文章中，我們介紹了小程序入門開發(fā)的基礎(chǔ)步驟，并通過(guò)幾個(gè)Hello Word例子，讓大家體驗(yàn)了下小程序的組件及API使用，接下來(lái)的教程中，我們將教大家詳細(xì)使用每個(gè)組件及API的使用。
在這篇教程中，我們將介紹小程序的視圖容器組件以及小程序基礎(chǔ)內(nèi)容組件的使用。
視圖容器組件
小程序的視圖容器組件分為五個(gè)組件，分別為負(fù)責(zé)普通顯示的view組件、負(fù)責(zé)可滾動(dòng)視圖區(qū)域scroll-viel組件，負(fù)責(zé)滑塊視圖容器swiper組件、可以觸發(fā)移動(dòng)的movable-area組件，已經(jīng)可覆蓋其他內(nèi)容的cover-view組件。這篇文章中，我們將對(duì)這幾個(gè)組件使用我們上一篇文章中創(chuàng)建的Hello World Demo進(jìn)行演示及介紹。
為了教程演示方便，在開始之前，我們需要安裝微信小程序官方分享的WeUI小程序視覺(jué)基礎(chǔ)樣式庫(kù)，安裝起來(lái)很簡(jiǎn)單，只需要點(diǎn)擊這里下載weui.wxss小程序樣式文件，然后將其復(fù)制到你小程序項(xiàng)目的lib文件夾即可，沒(méi)有l(wèi)ib文件夾請(qǐng)自行創(chuàng)建。
之后，在你的頁(yè)面wxss文件中引入weui.wxss就能直接使用這個(gè)樣式庫(kù)文件了。
Hello World - view
等上面文件準(zhǔn)備就緒，我們就可以開始學(xué)習(xí)view組件的使用，首先，將原來(lái)項(xiàng)目中的index.wxss及index.wxml中的內(nèi)容清除干凈，同時(shí)刪除index.js中的多余的函數(shù)，保留默認(rèn)函數(shù)即可。接下來(lái)，將index.wxss中的文件替換為下面的內(nèi)容。
保存，你將看到類似下面的樣式。
有前端開發(fā)經(jīng)驗(yàn)的同學(xué)應(yīng)該能看懂，這里的寫法和css樣式很像似，指定相關(guān)的class，就能夠?qū)崿F(xiàn)不同的排序及樣式。我們可以嘗試更改flex-direction:column的值將其改為flex-direction:column-reverse，看看會(huì)發(fā)生什么？
原來(lái)的1、2、3順序變更為3、2、1了，參考css文檔，column-reverse的效果與 column 相同，但是以相反的順序。果然，view組件是支持原生css樣式的。同時(shí)，小程序官方也提供了一些view組件特有的屬性，我們看看下表的內(nèi)容，在這里，我們可以體驗(yàn)下hover-class組件。
將index.wxml文件中的第4行代碼<view class="flex-item bc_green">1</view>改為<view class="flex-item bc_green" hover-class="flex-item bc_blue">1</view>，然后將鼠標(biāo)移動(dòng)到左上角黃色框內(nèi)1的位置，點(diǎn)擊看看會(huì)發(fā)生什么。
原來(lái)，這個(gè)view組件中的hover-class屬性能夠修改當(dāng)前view的樣式，當(dāng)你點(diǎn)擊這個(gè)view，將會(huì)顯示你在hover-class中定義的屬性。同時(shí)，我們也可以通過(guò)hover-start-time和hover-stay-time設(shè)定按住顯示時(shí)間和手松開后的保留時(shí)間。試試下面的代碼吧~
點(diǎn)擊排行
1
2
3
4
5
6
7
8
9
10