小程序基础-组件

转载

mb5fe55c8710ded 2019-11-23 13:24:00

文章标签 git ide 控件网络原理连线 文章分类 代码人生

小程序基础-组件_网络原理

作者 | Jeskson来源 | 达达前端小酒馆

⽂本的组件、表示图像的组件、表示视图容器的组件，表示链接的组件

组件的属性

公共属性是指⼩程序所有的组件都有的属性，⽐如id、class、style

轮播效果

⼩程序有专⻔的轮播组件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：要播放⾳频的资源地址

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'
      },    
    ],