uni-app 組件

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

<template>
 <view>
  <tagname property = "value">
     content
    </tagname>
 </view>
</template>

view
scroll-view
swiper
text
rich-text
progress

button
checkbox
form
input
label
picker
radio
slider
switch
textarea

navigator、
open-type String navigate 跳轉方式

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

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

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

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

navigate 對應 uni.navigateTo 的功能

redirect 對應 uni.redirectTo 的功能

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>

---

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

---

請點贊！因爲你們的贊同/鼓勵是我寫作的最大動力！

歡迎關注達達的簡書！

這是一個有質量，有態度的博客