小程序基礎(chǔ)-組件
2021-07-25 18:57:17

作者 |? Jeskson

?本的<text>組件、表示圖像的<image>組件、表示視圖容器的 <view>組件，表示鏈接的<navigator>組件

?

組件的屬性

?

公共屬性是指?程序所有的組件都有的屬性，?如id、class、style

?

輪播效果

?

?程序有專?的輪播組件swiper

?

• ?

<view class="home-top">????<view?class="home-swiper">????????<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activecolor}}">??????????<block wx:for="{{imgUrls}}" wx:key="*this" >????????????<swiper-item>????????????????<image src="{{item}}" style="width:100%;height:200px" class="slide-image" mode="widthFix"??/>????????????</swiper-item>??????????</block>????????</swiper>????</view></view>

?

• ?

imgUrls: [??'https:40',??'https:640',??'https:640'],interval: 5000,duration: 1000,indicatorDots: true,indicatorColor: "#ffffff",activecolor:"#2971f6",autoplay: true,

?

audio組件

?

audio組件是?頻組件

?

• ?

<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{musicinfo.name}}" author="{{musicinfo.author}}" controls></audio>

?

• ?

?musicinfo: {??????poster:?'http://'??????name: '此時此刻',??????author: '許巍',??????src: ''},

?

src：要播放?頻的資源地址

?

poster：默認(rèn)控件上的?頻封?的圖?資源地址

?

name：默認(rèn)控件上的?頻名字

?

author：默認(rèn)控件上的作者名字

?

video組件

?

video組件?來表示視頻

?

• ?

<video?id="daxueVideo"?src="=0"autoplay loop muted initial-time="100" controls event-model="bubble"></video>

?

autoplay：是否?動播放

?

loop：是否循環(huán)播放

?

muted：是否靜?播放

?

inital-time：指定視頻初始播放位置，單位是秒

?

controls：是否顯?默認(rèn)播放控件

?

cover效果

?

把view、圖?組件覆蓋在地圖map或視頻video組件之上

?

地圖組件

?

• ?

<map??id="myMap"??style="width: 100%; height: 300px;"??latitude="{{latitude}}"??longitude="{{longitude}}"??markers="{{markers}}"??covers="{{covers}}"??show-location></map>

?

• ?

?latitude:?22.540503?longitude:?113.934528,?markers:?[{??????id:?1,??????latitude:?22.540503,??????longitude:?113.934528,??????title:?'深圳騰訊?廈'????}],

?

在地圖上標(biāo)記多個點

?

• ?

?markers: [??????{????????id: 1,??????latitude: 22.540503,??????longitude: 113.934528,??????title: '深圳騰訊?廈'??????},??????{????????id: 2,????????latitude: 22.540576,????????longitude: 113.933790,????????title: '萬利達(dá)科技?廈'??????},??????{????????id: 3,????????latitude: 22.522807,????????longitude: 113.935338,????????title: '深圳騰訊濱海?廈'??????},??????{????????id: 4,????????latitude: 22.547400,????????longitude: 113.944370,????????title: '騰訊C2'??????},????????],

?

地圖是?個?常復(fù)雜的組件

?

callout:點擊marker出現(xiàn)?泡callout、以及?泡上的label，可以豐富點擊地圖標(biāo)記彈出豐富的信息介紹

?

circle：在地圖上顯?圓，?如?于顯??圓?公?，或者權(quán)重??在地圖的可視化

?

polygon：指定?系列坐標(biāo)點，根據(jù) points 坐標(biāo)數(shù)據(jù)?成閉合多邊形,，?如圈出實際的范圍

?

polyline：指定?系列坐標(biāo)點，從數(shù)組第?項連線?最后?項，?如跑步的路線

?

關(guān)于目前文章內(nèi)容即涉及前端，PHP知識點，如果有興趣即可關(guān)注，很榮幸，能被您發(fā)現(xiàn)，真是慧眼識英！也感謝您的關(guān)注，在未來的日子里，希望能夠一直默默的支持我，我也會努力寫出更多優(yōu)秀的作品。我們一起成長，從零基礎(chǔ)學(xué)編程，將 Web前端領(lǐng)域、數(shù)據(jù)結(jié)構(gòu)與算法、網(wǎng)絡(luò)原理等通俗易懂的呈現(xiàn)給小伙伴。分享 Web 前端相關(guān)的技術(shù)文章、工具資源、精選課程、熱點資訊。

?