小程序基础-组件
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：默认控件上的⾳频封⾯的图⽚资源地址

 

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：指定⼀系列坐标点，从数组第⼀项连线⾄最后⼀项，⽐如跑步的路线

 

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。