微信小程序?qū)W習(xí)之常用的視圖組件
更新時(shí)間：2022年11月07日 11:44:11 作者：癮???????????
但是最近由于開(kāi)發(fā)人手不夠,一個(gè)人開(kāi)啟全棧,一邊寫(xiě)接口一邊寫(xiě)頁(yè)面,剛好項(xiàng)目中有一個(gè)需求,所以嘗試使用自定義組件開(kāi)發(fā)這塊,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之常用的視圖組件的相關(guān)資料,需要的朋友可以參考下
一.常用的視圖組件
1.view
- 普通視圖區(qū)域
- 類(lèi)似與HTML中的div，是一個(gè)塊級(jí)元素
- 常用來(lái)實(shí)現(xiàn)頁(yè)面的布局效果
使用效果：
wxml文件：
<view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view>
wxss文件：
.container1 view{
width: 100px;/*寬*/
height: 100px;/*高*/
text-align: center;/*居中*/
line-height: 100px;/*縱向居中*/
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
/*給三個(gè)view加上不同的顏色*/
.container1{
display: flex;/*將三個(gè)view橫向排列*/
justify-content: space-around;/*橫向分散對(duì)其齊*/
}效果圖：
2.scroll-view
- 可滾動(dòng)的視圖區(qū)域
- 常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果
使用效果：
wxml文件：
<!-- scroll-y屬性：允許縱向滾動(dòng) --> <!-- scroll-x屬性：允許橫向滾動(dòng) --> <!-- 注意：使用豎向滾動(dòng)時(shí)，必須給scroll-view一個(gè)固定高度 --> <scroll-view class="container1" scroll-y> <view>A</view> <view>B</view> <view>C</view> </scroll-view>
wxss文件：
.container1 view{
width: 100px;/*寬*/
height: 100px;/*高*/
text-align: center;/*居中*/
line-height: 100px;/*縱向居中*/
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
/*給三個(gè)view加上不同的顏色*/
.container1{
border: 1px solid red;
/*給scroll-view一個(gè)固定高度*/
height: 120px;
width: 100px;
}效果圖：
可以使用鼠標(biāo)上下拖動(dòng)，達(dá)到滾動(dòng)的效果！
3.swiper和swiper-item
輪播圖容器組件和輪播圖item組件
使用效果：
wxml文件：
<!-- 輪播圖區(qū)域 -->
<!-- indicator-dots 屬性：顯示面板指示點(diǎn) -->
<swiper class="swiper-container">
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper> wxss文件：
.swiper-container{
height: 150px;/*輪播圖高度*/
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightblue;
}
swiper-item:nth-child(3) .item{
background-color: lightcoral;
}效果圖：
l circular實(shí)現(xiàn)銜接滑動(dòng)，滑倒C，往右滑動(dòng)回到A，類(lèi)似循環(huán)隊(duì)列?。?/p>
例如：加上 indicator-dots 屬性
<!-- 輪播圖區(qū)域 -->
<!-- indicator-dots 屬性：顯示面板指示點(diǎn) -->
<swiper class="swiper-container" indicator-dots>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper> 效果圖：可與上進(jìn)行對(duì)比
4.text
- 文本組件
- 類(lèi)似與HTML中的span標(biāo)簽，是一個(gè)行內(nèi)元素
使用效果：
wxml文件：
<view> 手機(jī)號(hào)支持長(zhǎng)按選中保存 <text selectable>18814231000</text> </view> <!-- 只有在text中的文本才能長(zhǎng)按保存(必須加上selectable)，view中不可長(zhǎng)按保存 -->
效果圖：
5.rich-text
- 富文本組件
- 支持把HTML字符串渲染為WXML結(jié)構(gòu)
通過(guò)rich-text組件的nodes屬性節(jié)點(diǎn)，把HTML字符串渲染為對(duì)應(yīng)的UI結(jié)構(gòu)：
wxml文件：
<view> 手機(jī)號(hào)支持長(zhǎng)按選中保存 <text selectable>18814231000</text> </view> <!-- 只有在text中的文本才能長(zhǎng)按保存(必須加上selectable)，view中不可長(zhǎng)按保存 --> <rich-text nodes="<h1 style='color:red;'>標(biāo)題<h1>"></rich-text>
效果圖：
6.button
- 按鈕組件
- 功能比HTML中的button按鈕豐富
- 通過(guò)open-type屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶(hù)授權(quán)等）
使用效果：
wxml文件：
<!-- 按鈕組件的基本使用 --> <!-- 通過(guò)type屬性指定按鈕顏色類(lèi)型 --> <button>普通按鈕</button> <button type="primary">主色調(diào)按鈕</button> <button type="warn">警告按鈕</button> <!-- size="mini" 小尺寸按鈕 --> <button size="mini">普通按鈕</button> <button type="primary" size="mini">主色調(diào)按鈕</button> <button type="warn" size="mini">警告按鈕</button> <!-- plain 鏤空按鈕 --> <button size="mini" plain>普通按鈕</button> <button type="primary" size="mini" plain>主色調(diào)按鈕</button> <button type="warn" size="mini" plain>警告按鈕</button>
效果圖：
7.image
- 圖片組件
- image組件默認(rèn)高度約300px、高度約240px
使用效果：
wxml文件：
<!-- image 圖片組件 --> <image></image> <image src="/images/123.jpg"></image>
wxss文件：
image{
border: 1px solid red;
}效果圖：
例如更改屬性mode為aspectFit，自適應(yīng)的，效果圖：
<!-- image 圖片組件 --> <image></image> <image src="/images/123.jpg" mode="aspectFit"></image>
8.navigator
- 頁(yè)面導(dǎo)航組件
- 類(lèi)似于HTML中的a鏈接
總結(jié)
到此這篇關(guān)于微信小程序?qū)W習(xí)之常用的視圖組件的文章就介紹到這了,更多相關(guān)微信小程序組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
gulpjs是一個(gè)前端構(gòu)建工具，與gruntjs相比，gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù)，API也非常簡(jiǎn)單，學(xué)習(xí)起來(lái)很容易，下面這篇文章主要給大家介紹了關(guān)于前端構(gòu)建工具之gulp的配置與搭建的相關(guān)資料，需要的朋友可以參考下。2017-06-06
javascript 獲取函數(shù)形參個(gè)數(shù)
本節(jié)主要介紹了javascript獲取函數(shù)形參個(gè)數(shù)的具體實(shí)現(xiàn)，需要的朋友可以參考下2014-07-07
js實(shí)現(xiàn)拖拽 閉包函數(shù)詳細(xì)介紹
在開(kāi)發(fā)過(guò)程中可能會(huì)使用js實(shí)現(xiàn)拖拽等相關(guān)功能，本文將以此問(wèn)題進(jìn)行深入介紹，需要了解的朋友可以參考下2012-11-11
鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本 兼容ie/firefox
table拖動(dòng)(兼容Firefox 3.5/IE6)，固定表格寬度在網(wǎng)上搜索了好久，找到的都是只能在IE下有效的，后來(lái)終于找到了支持firefox的了。2009-12-12
雖然精通jquery，但對(duì)它的原型javascript卻不是很了解，最近在學(xué)習(xí)javascript中遇到了一些困難，比如冒泡和捕獲，很多次被提到，但又不知究竟應(yīng)用在何處。找到了一些好文章解惑，在這里分享給大家2014-04-04
非阻塞動(dòng)態(tài)加載javascript廣告實(shí)現(xiàn)代碼
非阻塞動(dòng)態(tài)加載javascript廣告，需要的朋友可以參考下。2010-11-11
深入淺出JSON.parse的實(shí)現(xiàn)方法
眾所周知,JSON.parse方法用于將一個(gè)json字符串轉(zhuǎn)換成由字符串描述的?JavaScript?值或?qū)ο?本文主要為大家介紹了JSON.parse方法的使用,需要的可以參考下2024-04-04
這篇文章主要介紹了asp.net+js實(shí)現(xiàn)金額格式化的相關(guān)資料,需要的朋友可以參考下2015-02-02
微信小程序上線(xiàn)發(fā)布具體流程簡(jiǎn)析
眾所周知,微信小程序制作成功后,是需要提交到微信公眾平臺(tái)去審核的,審核通過(guò)后,才可以發(fā)布上線(xiàn)的,上線(xiàn)了之后才可以進(jìn)行運(yùn)營(yíng)的,下面這篇文章主要給大家介紹了關(guān)于微信小程序上線(xiàn)發(fā)布具體流程的相關(guān)資料,需要的朋友可以參考下2022-10-10
JavaScript Event學(xué)習(xí)第六章 事件的訪(fǎng)問(wèn)
在這一章我會(huì)講解如何去訪(fǎng)問(wèn)一個(gè)事件對(duì)象。2010-02-02