小程序組件介紹
- 組件是可復(fù)用的軟件模塊
- 組件是用來封裝頁面中某一部分功能的豌研，例如：輪播圖組件蔓钟、底部tabBar組件蕴轨、業(yè)務(wù)組件
- 多個組件的靈活組合可以實現(xiàn)不同的頁面功能展示
小程序中常用的組件
- view
- text
- button
- icon
- swiper
- input
- navigator
- image
- radio
- checkbox
view組件
視圖容器
text組件
文本組件
button組件
button 組件 開放能力
<!-- 利用button開放的能力 獲取用戶的信息 -->
<!-- 定義開放能力響應(yīng)的事件 -->
<button open-type="getUserInfo"
type="primary" bindgetuserinfo="handleUserInfo">獲取用戶信息</button>
<!-- 利用button 開放能力share轉(zhuǎn)發(fā)頁面 -->
<button type="default" open-type="share">share轉(zhuǎn)發(fā)頁面</button>
<!-- openSetting -->
<button type="warn" open-type="openSetting">打開系統(tǒng)設(shè)置頁面</button>
// index.js
// 獲取用戶信息
handleUserInfo:function(e){
// 打印e
console.log(e);
console.log(e.detail.userInfo);
},
icon組件
<icon type="success"></icon>
<icon type="success_no_circle"></icon>
<icon type="download"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
<icon type="warn"></icon>
<icon type="cancel"></icon>
<icon type="waiting"></icon>
<icon type="info"></icon>
swiper組件
- 滑塊視圖容器词爬。其中只可放置swiper-item組件镐躲，否則會導(dǎo)致未定義的行為。
<!--
autoplay:自動播放
indicator-dots：是否顯示面板指示點
interval：自動切換時間間隔
indicator-color：指示點顏色
indicator-active-color：當(dāng)前選中的指示點顏色 -->
<swiper indicator-color="#ffcce3" indicator-active-color="#00beff"
indicator-dots="true" interval="3000" autoplay="{{true}}">
<swiper-item wx:for="{{swiperData.message}}" wx:key='*this'>
<image src="{{item.image_src}}"></image>
</swiper-item>
</swiper>
navigator組件
- 頁面跳轉(zhuǎn)組件
<navigator open-type="navigate" url="/pages/logs/logs">等價默認(rèn)不寫navigate</navigator>
<navigator open-type="redirect" url="/pages/logs/logs">redirect</navigator>
<navigator open-type="switchTab" url="/pages/text/text">switchTab</navigator>
<navigator open-type="reLaunch" url="/pages/logs/logs">reLanuch</navigator>
image組件
- 圖片岖常。支持 JPG驯镊、PNG、SVG、WEBP阿宅、GIF 等格式
<!--
src：圖片資源地址
mode：圖片裁剪、縮放的模式
-->
<image style="width: 200px; height: 200px; background-color: #eeeeee;"
mode="scakeToFill"
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<image style="width: 200px; height: 200px; background-color: #eeeeee;"
mode="aspectFit"
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<image style="width: 200px; height: 200px; background-color: #eeeeee;"
mode="aspectFill"
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
radio 組件 | radio-group 組件
- 單選組件 | 單項選擇器笼蛛，內(nèi)部由多個 radio 組成
<radio-group bindchange="radioChange">
<label for="v">
<radio value="cn">中國</radio>
</label>
<label for="v">
<radio value="usa">美國</radio>
</label>
</radio-group>
// js
radioChange(e) {
console.log(e);
console.log(e.detail.value);
},
checkbox 組件 | checkbox-group 組件
- 多選項目 | 多項選擇器洒放，內(nèi)部由多個checkbox組成
<checkbox-group bindchange="checkboxChange">
<label for="c">
<checkbox value="cn"></checkbox>中國
</label>
<label for="c">
<checkbox value="usa"></checkbox>美國
</label>
<label for="c">
<checkbox value="jp"></checkbox>日本
</label>
</checkbox-group>
// js
checkboxChange:function (e) {
console.log(e.detail.value);
},
input 組件
- 輸入框組件
<input class="weui-input" auto-focus placeholder="將會獲取焦點"/>
微信小程序事件處理
- 普通事件綁定
語法：bind+事件名稱=“處理事件函數(shù)” 或者 bind:事件名稱=“處理事件函數(shù)”
<view bindtap="handleTap">Click</view>
<view bind:tap="handleTap">Click</view>
// js
// 處理函數(shù)，定義在js文件中
handleTap(e){
console.log(e);
},
- 綁定并阻止事件冒泡
除 bind 外滨砍，也可以用 catch 來綁定事件往湿。與 bind 不同， catch 會阻止事件向上冒泡惋戏。
<!-- 阻止冒泡 -->
<view bindtap="changeTap">
<view catchtap="changeTap" data-id="123">子</view>
</view>
// js
changeTap(e){
console.log(e);
console.log(e.target.dataset);
},
