用微信小程序開店之九——小程序組件5:“表單”(3)

上回書講到“表單”組件的:picker標籤組件,並給出編程示例進行效果展示;今天繼續講“表單”組件的:picker_view、slider、switch標籤組件,先簡單介紹下這三個組件:

a、picker-view組件:支持自定義多列選擇列表;

b、slider組件:滑塊組件,支持——設置左右兩端帶圖標的滑塊、step步進滑塊、顯示進度值滑塊、預設最大/最小值滑塊;

c、switch組件:簡單易用的開關選擇器;


閒言少敘,進入主題:

1、複習小程序基礎組件總覽圖


2、表單組件

使用之前建的test頁面,用於今天課程內容的表單組件展示

(1)修改test.wxml文件,添加“picker-view”標籤組件(我們以“年月日時分秒”舉例)


(2)修改test.js文件,添加組件數據填充所需要的常量(const)及初始化值


(3)修改test.js文件,添加頁面組件data初始數據定義


(4)修改test.js文件,添加頁面組件綁定事件


(5)保存,自動編譯,查看picker-view組件的運行效果



下面用簡單示例驗證slider(滑塊)組件

(6)修改test.wxss文件,添加“section section_gap”樣式備用


(7)修改test.wxml文件,添加“slider”標籤組件(我們以“左右端圖標、step步進、顯示進度值、設置最大/最小值”效果舉例)


(8)修改test.js文件,添加組件調試模式下的操作效果數據刷新日誌事件處理方法



(9)保存,自動編譯,在“調試”模式下,查看slider組件的運行效果


本講的最後用簡單示例驗證switch(開關選擇)組件

(10)修改test.wxml文件,添加“switch”標籤組件(我們以“初始化選中、初始化未選中”兩種效果舉例)


(11)修改test.js文件,添加組件調試模式下的switch點擊事件處理方法


(12)保存,自動編譯,在“調試”模式下,查看switch組件的運行效果


好啦,到此爲止“表單”這個小程序中最大的組件集合介紹完了。下節繼續講解剩餘的小程序組件。 ^_^

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章