当前位置: 首页>C语言>正文

range 小程序picker_小程序開發講義【入門篇】 03

range 小程序picker_小程序開發講義【入門篇】 03

80fb96d9e4cab4f587fd7639b00f32d8.png

小程序開發講義【入門篇】- 03

小程序組件

表單組件

按鈕組件

屬性說明size:有效取值default,minitype:按鈕樣式primary,default,warnplain:按鈕是否鏤空,背景色透明,默認否disabled:是否禁用,默認否loading:名稱前是否帶loading圖標,默認否form-type:有效值submit,reset,點擊分別觸發對應事件hover-class:默認button-hover,按鈕點擊下去的默認效果,為none時沒有點擊效果標簽組件屬性只有這個for,用于指定一個組件的id進行綁定,綁定后在觸發label組件時會觸發所綁定的那個組件的事件。

????組件Label:

????點我.測試

????組件Label2:

????點我1.測試

????點我2.測試

對應的js:

btntest: function(){

????console.log('---點我.測試---');

},

btntest1: function(){

????console.log('---點我1.測試---');

},

btntest2: function(){

????console.log('---點我2.測試---');

},

關于上面的兩個實例,具體區別是什么?要能清楚的理解。

CheckBox組件

多選框實現多選的組件,需要放在checkbox-group內使用,且checkbox-group只有一個屬性:

bindchange:觸發change事件

而checkbox的屬性有:value作為具體值,當選中時會傳入group變更事件中去。

????選擇1

????選擇2

????選擇3

????選擇4

????選擇5

對應的js:

cbxgrpChge: function (me){

????var getv = me.detail.value;

????this.setData({ cbxsled: getv });

????console.log('---CbxGrpChge---', this.data.cbxsled);

},

Radio組件與CheckBox類似

????選擇1

????選擇2

????選擇3

????選擇4

????選擇5

對應js:

rdogrpChge: function (me){

????var getv = me.detail.value;

????this.setData({ rdosled: getv });

????console.log('---RdoGrpChge---', this.data.rdosled);

},

只是要注意,單選鈕組件選中的是單個值。不是數組Picker選擇器組件picker選擇器支持3種模式,普通選擇器,時間選擇器和日期選擇器。具體語法為:點擊選擇...mode為“selector”時,默認值也是這個,為普通選擇器。具體屬性有:range,指定范圍value,選中的值bindchange,綁定事件mode為time的picker屬性:value:選中的時間,格式為 hh:mmstart,end:起始和結束,格式為 hh:mmbindchange:綁定的事件

????時間選擇器:具體選擇為:{{timePk}}

mode為date的picker屬性比time多了個時間單位fieldsvalue,start,end:格式為yyyy-mm-ddfields:有效值為 day、month、yearbindchange:綁定的事件

????日期選擇器:具體選擇為:{{datePk}}

滑動選擇器 sliderslider是用于選擇數值的滑塊,屬性有:min:最小值,默認0max:最大值,默認100step:步長,默認1disabled:是否禁用,默認 否value:當前值,默認0show-value:是否顯示當前值,默認 否bindchange:每拖動一次的變化值對應js:

sliderChge: function (me){

????console.log('值:', me.detail.value);

},

事件的觸發是滑動結束后觸發。開關選擇器 switch屬性有:checked:是否選中,默認 否type:類型,默認switch,另一個值 checkboxbindchange:點選后觸發事件輸入框組件?input屬性有:value:輸入值type:類型,取值有 text、number、idcard、digit、time、datepassword:是否密碼類型?默認 否placeholder:提示信息placeholder-style:指定placeholder的樣式placeholder-class:指定樣式類名disabled:是否禁用,默認 否maxlengh:輸入最大長度,默認140,如果設置-1,則不限制auto-focus:自動獲得焦點,默認 否,頁面里只能有一個input或textarea設置自動獲得焦點。focus:獲得焦點,默認 否bindinput:綁定輸入事件bindfocus:獲得焦點時觸發bindblur:失去焦點時觸發多行輸入框組件?textarea屬性有:value:輸入值placeholder:提示信息placeholder-style:指定placeholder的樣式placeholder-class:指定樣式類名disabled:是否禁用,默認 否maxlengh:輸入最大長度,默認140,如果設置-1,則不限制auto-focus:自動獲得焦點,默認 否,頁面里只能有一個input或textarea設置自動獲得焦點。auto-height:自動增高,默認 否,設置true后height失效focus:獲得焦點,默認 否bindlinechange:輸入框行數變化時觸發bindfocus:獲得焦點時觸發bindblur:失去焦點時觸發表單Form組件

小程序中的form和普通html頁面中的作用不同,因為小程序中的form不是用來做post或get提交數據的,而是通過事件對象來獲取form中的數據的;form組件需配合button的form-type來使用,如果form-type為submit則點擊按鈕后會觸發form的bindsubmit事件,同理,如果form-type為reset時,會觸發form的bindreset事件。

屬性:report-submit:是否返回formId發送模板消息bindsubmit:提交事件bindreset:重置事件對于form組件中的組件,必須包含name標簽屬性,才可以在bindsubmit事件中獲取各個元素組件的值或者選擇的索引值。image 圖片組件標簽語法:mode:默認為scaleToFill,bindload:圖片加載完成后觸發,傳遞圖片的寬度和高度,單位pxmode的支持屬性值:scaleToFill,為不保持縱橫比,鋪滿拉伸至整個圖片;aspectFit,保持縱橫比,使得圖片長邊能夠顯示完全,可以完整顯示圖片aspectFill,保持縱橫比,使得圖片的短邊能夠顯示完全,即會發生截取,只能是長度或垂直方向上能夠顯示完整,另一邊會發生截取。mode還支持截取模式:top:只顯示上部分bottom:只顯示下部分left、right:只顯示左邊或右邊部分center:只顯示中間部分top left、top right:只顯示左上或右上部分bottom left、bottom right:只顯示左下或右下部分音頻組件?audio屬性有:id:唯一標識src:源地址loop:是否循環播放,默認 否controls:是否顯示默認控件,?默認 是poster:音頻封面圖片的源地址name:顯示在音頻上的名稱author:顯示在音頻上的作者,以上三項如果contorls為否時,設置無效binderror:錯誤事件bindplay:播放事件bindpause:暫停事件bindtimeupdate:播放進度改變時觸發bindended:播放結束時觸發
如何設置audio自動播放呢?可以通過以下方法:在js的ready方法中調用wx.createAudioContextthis.audio = wx.createAudioContext('myAudio');this.audio.play();視頻組件 video屬性有:src:源地址ontrols:是否顯示播放控件,默認 是danmu-list:彈幕列表danmu-btn:是否顯示彈幕按鈕,默認否enable-danmu:是否開啟彈幕,默認否autoplay:是否自動播放,默認否bindplay、bindpause、bindended、binderror:四類事件其中的danmu-list為一個數組,每個數組元素為一組json對象:[{text:'彈幕內容...', color:'#111111', time:3},{text:'彈幕內容...', color:'#111111', time:3}]如果要動態發送彈幕,可以通過相關的API來實現,如:wx.createVedioContext('vdoid'),獲得返回對象句柄后,通過sendDanm({ text:'這是個彈幕', color:'#123123'})來發送。還有一個常用的與vedio相關的API是wx.chooseVedio();做一個實例,比如在js中寫在獲取本地視頻的方法中:getLocVedio:?function(){????wx.chooseVedio({????????sourceType:?[ 'album', 'camera' ],????????maxDuration: 60,????????camera:?[ 'front', 'back' ],????????success: function (res)?{????????????this.setData( {? vedioSrc: res.tempFilePath } );????????})????})},

https://www.zydui.com/affc2UG8CDQ9TBFcG.html
>

相关文章:

  • 詳解PyTorch中的contiguous
  • PyTorch中的contiguous解讀
  • Pytorch中contiguous()函數理解
  • ios自定義UITabBar-仿寫掌上英雄聯盟的UITabBar
  • 基于Cocos2d-x的英雄聯盟皮膚選擇菜單
  • lol-登陸英雄聯盟出錯
  • JS中雙層for循環執行順序
  • 關于for循環執行順序
  • 上古卷軸5boss計算機丟失,上古卷軸5常見BUG解決辦法
  • 上古世紀服務器維護真情禮,4月9日例行維護懷舊服合服公告
  • 塔羅牌張數
  • 工程管理中的工程技術
  • 銳派出品:LOL新年特輯S4各類細節之下路篇
  • 藍城兄弟Q4業績背后,垂直社區具備多少想象力?
  • Mac OS啟動服務優化高級篇(launchd tuning)
  • #Geek Point# 為什么現在要去印度看一看?
  • vm 流程運行mac os_什么是“商務”流程,為什么在我的Mac上運行?
  • # 陌生人社交產品:需求、困境與破局之道
  • mac 不受信任在哪里更改_什么是受信任的,為什么它可以在Mac上運行?
  • 車行軌跡分類實踐
  • 智慧車行預約小程序 v9.1
  • i12藍牙耳機充電倉怎么看充滿電_車行藍牙耳機價格高性價比的選擇
  • 車行平安
  • 論文閱讀——《基于卷積神經網絡的車行環境多類障礙物檢測與識別》
  • 飛槳開發者創意薈:PaddleHub一鍵部署,AI創意實現原來如此簡單
  • eclipse左側欄目即包資源管理器怎么打開
  • 卷毛機器人符文_卷毛S6娜美輔助天賦 娜美輔助符文天賦S6最新
  • 天賦介紹
  • 蘋果怎么沒有4g信號還無服務器,不顯示4g信號怎么回事?蘋果手機不顯示4g信號的解決方法...
  • c4D體積生成和Quad Remesher重新拓撲減面插件