uni-app 組件

時間 2019-11-08

標籤 uni app 組件简体版

原文原文鏈接

組件：組件時視圖層的基本組成單元ios

<template>
 <view>
  <tagname property = "value">
     content
    </tagname>
 </view>
</template>複製代碼

viewscroll-viewswipertextrich-textprogressgit

buttoncheckboxforminputlabelpickerradiosliderswitchtextarea小程序

navigator、open-type String navigate 跳轉方式微信小程序

hover-class String navigator-hover指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果微信

hover-stop-propagation Boolean false指定是否阻止本節點的祖先節點出現點擊態ide

hover-start-time Number 50按住後多久出現點擊態，單位毫秒oop

hover-stay-time Number 600手指鬆開後點擊態保留時間，單位毫秒
post

navigate 對應 uni.navigateTo 的功能url

redirect 對應 uni.redirectTo 的功能spa

switchTab 對應 uni.switchTab 的功能

reLaunch 對應 uni.reLaunch 的功能微信小程序

navigateBack 對應 uni.navigateBack 的功能微信小程序

<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳轉到新頁面</button>
</navigator>
 <navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
                    <button type="default">在當前頁打開</button>
</navigator>複製代碼

export default {
    data() {
        return {
            title: 'navigator'
        }
    },
    methods: {
    }
}複製代碼

頁面傳值

<template>
    <view>
        <view class="page-body">
            <view class="btn-area">
                <navigator url="./test?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳轉到新頁面</button>
                </navigator>
            </view>
        </view>
    </view>
</template>複製代碼

<script>
export default {
 data:{},
 onLoad:function(options){
  console.log(options);
  console.log(options.title);
 }
}
</script>複製代碼

縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高徹底拉伸至填滿 image 元素
縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能徹底顯示出來。也就是說，能夠完整地將圖片顯示出來。
縮放 aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來。也就是說，圖片一般只在水平或垂直方向是完整的，另外一個方向將會發生截取。
縮放 widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
裁剪 top 不縮放圖片，只顯示圖片的頂部區域
裁剪 bottom 不縮放圖片，只顯示圖片的底部區域
裁剪 center 不縮放圖片，只顯示圖片的中間區域
裁剪 left 不縮放圖片，只顯示圖片的左邊區域
裁剪 right 不縮放圖片，只顯示圖片的右邊區域
裁剪 top left 不縮放圖片，只顯示圖片的左上邊區域
裁剪 top right 不縮放圖片，只顯示圖片的右上邊區域
裁剪 bottom left 不縮放圖片，只顯示圖片的左下邊區域
裁剪 bottom right 不縮放圖片，只顯示圖片的右下邊區域複製代碼

audio 音頻

id String  audio 組件的惟一標識符
src String  要播放音頻的資源地址
loop Boolean false 是否循環播放
controls Boolean false 是否顯示默認控件
poster String  默認控件上的音頻封面的圖片資源地址，若是 controls 屬性值爲 false 則設置 poster 無效
name String 未知音頻 默認控件上的音頻名字，若是 controls 屬性值爲 false 則設置 name 無效
author String 未知做者 默認控件上的做者名字，若是 controls 屬性值爲 false 則設置 author 無效
binderror EventHandle  當發生錯誤時觸發 error 事件，detail = {errMsg: MediaError.code}
bindplay EventHandle  當開始/繼續播放時觸發play事件
bindpause EventHandle  當暫停播放時觸發 pause 事件
bindtimeupdate EventHandle  當播放進度改變時觸發 timeupdate 事件，detail = {currentTime, duration}
bindended EventHandle  當播放到末尾時觸發 ended 事件
MediaError.code複製代碼

代碼：

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap" style="text-align: center;">
                <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
            </view>
        </view>
    </view>
</template>
export default {
    data() {
        return {
            title: 'audio',
            current: {
                poster: 'https://',
                name: '',
                author: '',
                src: 'https://',
            },
            audioAction: {
                method: 'pause'
            }
        }
    }
}複製代碼

map 地圖

longitude Number  中心經度 
latitude Number  中心緯度 
scale Number 16 縮放級別，取值範圍爲5-18 
markers Array  標記點 
covers Array  即將移除，請使用 markers 
polyline Array  路線 
circles Array  圓 
controls Array  控件 
include-points Array  縮放視野以包含全部給定的座標點 
show-location Boolean  顯示帶有方向的當前定位點 
@markertap EventHandle  點擊標記點時觸發 
@callouttap EventHandle  點擊標記點對應的氣泡時觸發 微信小程序、5+App
@controltap EventHandle  點擊控件時觸發 
@regionchange EventHandle  視野發生變化時觸發 
@tap EventHandle  點擊地圖時觸發 
@updated EventHandle  在地圖渲染更新完成時觸發 微信小程序複製代碼

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
        </view>
    </view>
</template>
export default {
    data() {
        return {
            title: ' ',
            latitude: ,
            longitude: ,
            markers: [{
    width : 40,
    height: 40,
                latitude: ,
                longitude: ,
                iconPath: ' '
            }]
        }
    },
    methods: {
    }
}
</script>複製代碼

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。