微信小程序_基礎組件學習02

swiper組件

swiper是滑塊容器，也就是手機端的輪播圖。

swiper組件有兩部分組成swiper和swiper-item。

swiper-item需要放在swiper這個容器里面。

<swiper><swiper-item class="bannerItem"></swiper-item><swiper-item class="bannerItem"></swiper-item> </swiper> 屬性類型默認值說明

indicator-dots	boolean	false	是否顯示面板指示點
indicator-color	color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	color	#000000	當前選中的指示點顏色
autoplay	boolean	false	是否自動切換
interval	number	5000	自動切換時間間隔
circular	boolean	false	否

indicator-dots 用于開啟指定點（輪播圖必備）

indicator-color用于指示點的顏色，一般設置為rgba(0,0,0,.5)

circular 開啟后，當當前在最后一張時，向后滑動會來到第一張。

button組件

只要談到表單就離不開的按鈕組件。

屬性類型默認值必填說明

size	string	default	否	按鈕的大小
type	string	default	否	按鈕的樣式類型
plain	boolean	false	否	按鈕是否鏤空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名稱前是否帶 loading 圖標
form-type	string		否	用于 form 組件，點擊分別會觸發 form 組件的 submit/reset 事件
open-type	string		否	微信開放能力

特別提醒：微信小程序里的button是塊級標簽，也就是說當只有一個button時候，它會獨占一行。

<button type="primary">按鈕</button>

type的主要值

值說明

primary	綠色
default	白色
warn	紅色

radio-group和radio組件

單選組件, 只能選擇radio-group中的一個。

<radio-group><radio value="0">男</radio><radio value="1">女</radio> </radio-group>

check-group和checkbox組件

復選組件，可以選擇多個。

<view>愛好:<checkbox-group><checkbox value="0">籃球</checkbox><checkbox value="1">足球</checkbox><checkbox value="2">羽毛球</checkbox></checkbox-group> </view>

input組件

input組件作為輸入框，form表單中不可或缺的重要元素。

屬性類型默認值必填說明

value	string		是	輸入框的初始內容
type	string	text	否	input 的類型
password	boolean	false	否	是否是密碼類型
placeholder	string		是	輸入框為空時占位符
placeholder-style	string		是	指定 placeholder 的樣式
placeholder-class	string	input-placeholder	否	指定 placeholder 的樣式類
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大輸入長度，設置為 -1 的時候不限制最大長度

input表單有一個缺點，那就是它默認沒有外邊框。得通過自己寫css來添加外邊框。

<form action="#"><input class="viewIpt" placeholder="請輸入用戶名" /><input class="viewIpt" placeholder="請輸入密碼" password="true"/> </form> .viewIpt{border: 1px solid black;border-radius: 4px;margin: 8px;padding: 4px; }

switch組件

switch組件就是滑塊，自帶很漂亮的動畫。

progress組件

屬性類型默認值必填說明

percent	number		否	百分比0~100
show-info	boolean	false	否	在進度條右側顯示百分比
border-radius	number/string	0	否	圓角大小
font-size	number/string	16	否	右側百分比字體大小
stroke-width	number/string	6	否	進度條線的寬度
color	string	#09BB07	否	進度條顏色（請使用activeColor）
activeColor	string	#09BB07	否	已選擇的進度條的顏色

進度條，這種東西可以大大提高用戶的使用體驗。

<view><progress percent="100" active="true" show-info="true" border-radius="10"></progress> </view>

總結

以上是生活随笔為你收集整理的微信小程序_基础组件学习02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。