小程序基礎-組件

時間 2020-01-03

標籤程序基礎組件简体版

原文原文鏈接

做者 | Jeskson
來源 | 達達前端小酒館前端

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

組件的屬性算法

公共屬性是指⼩程序全部的組件都有的屬性，⽐如id、class、style編程

輪播效果segmentfault

⼩程序有專⻔的輪播組件swiper數組

<view class="home-top">
    <view class="home-swiper">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicat
orColor}}" indicator-active-color="{{activecolor}}">
          <block wx:for="{{imgUrls}}" wx:key="*this" >
            <swiper-item>
                <image src="{{item}}" style="width:100%;height:200px" clas
s="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="{{music
info.name}}" author="{{musicinfo.author}}" controls></audio>

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

src：要播放⾳頻的資源地址ide

poster：默認控件上的⾳頻封⾯的圖⽚資源地址工具

name：默認控件上的⾳頻名字

author：默認控件上的做者名字

video組件

video組件⽤來表示視頻

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

autoplay：是否⾃動播放

loop：是否循環播放

muted：是否靜⾳播放

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

controls：是否顯⽰默認播放控件

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: '深圳騰訊⼤廈'    }],

在地圖上標記多個點

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

地圖是⼀個⾮常複雜的組件

callout:點擊marker出現⽓泡callout、以及⽓泡上的label，能夠豐富點擊地圖標記彈出豐富的信息介紹

circle：在地圖上顯⽰圓，⽐如⽤於顯⽰⽅圓⼏公⾥，或者權重⼤⼩在地圖的可視化

polygon：指定⼀系列座標點，根據 points 座標數據⽣成閉合多邊形,，⽐如圈出實際的範圍

polyline：指定⼀系列座標點，從數組第⼀項連線⾄最後⼀項，⽐如跑步的路線

❤️ 不要忘記留下你學習的腳印 [點贊收藏評論]

做者Info：

【做者】：Jeskson

【原創公衆號】：達達前端小酒館。

【轉載說明】：轉載請說明出處，謝謝合做！~

關於目前文章內容即涉及前端，PHP知識點，若是有興趣便可關注，很榮幸，能被您發現，真是慧眼識英！也感謝您的關注，在將來的日子裏，但願可以一直默默的支持我，我也會努力寫出更多優秀的做品。咱們一塊兒成長，從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。分享 Web 前端相關的技術文章、工具資源、精選課程、熱點資訊。

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