小程序基础-组件

本是古典何须时尚 2021-08-19 23:44 542阅读 0赞

![file][]

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

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

组件的属性

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

轮播效果

⼩程序有专⻔的轮播组件swiper

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

audio组件

audio组件是⾳频组件

musicinfo: {
          poster: 'http://'
          name: '此时此刻',
          author: '许巍',
          src: ''
    },

src：要播放⾳频的资源地址

poster：默认控件上的⾳频封⾯的图⽚资源地址

name：默认控件上的⾳频名字

author：默认控件上的作者名字

video组件

video组件⽤来表示视频

autoplay：是否⾃动播放

loop：是否循环播放

muted：是否静⾳播放

inital-time：指定视频初始播放位置，单位是秒

controls：是否显⽰默认播放控件

cover效果

把view、图⽚组件覆盖在地图map或视频video组件之上

地图组件

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 前端相关的技术文章、工具资源、精选课程、热点资讯。

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

**这是一个有质量，有态度的博客**

![7d927f18ebd05ea1d505a572393fbc87.jpg][]

[file]: /images/20210724/dd3afb7a68a849fca5fd38e5e2c1a0ed.png
[Link 1]: https://blog.csdn.net/qq_36232611
[7d927f18ebd05ea1d505a572393fbc87.jpg]: /images/20210724/c77c156e960b4e869148e657fd984a83.png