小程序基础-组件
作者 | 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'
},
],
地图是⼀个⾮常复杂的组件
callout:点击marker出现⽓泡callout、以及⽓泡上的label,可以丰富点击地图标记弹出丰富的信息介绍
circle:在地图上显⽰圆,⽐如⽤于显⽰⽅圆⼏公⾥,或者权重⼤⼩在地图的可视化
polygon:指定⼀系列坐标点,根据 points 坐标数据⽣成闭合多边形,,⽐如圈出实际的范围
polyline:指定⼀系列坐标点,从数组第⼀项连线⾄最后⼀项,⽐如跑步的路线
❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]
作者Info:
【作者】:Jeskson
【原创公众号】:达达前端小酒馆。
【转载说明】:转载请说明出处,谢谢合作!~
关于目前文章内容即涉及前端,PHP知识点,如果有兴趣即可关注,很荣幸,能被您发现,真是慧眼识英!也感谢您的关注,在未来的日子里,希望能够一直默默的支持我,我也会努力写出更多优秀的作品。我们一起成长,从零基础学编程,将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达达的CSDN!
这是一个有质量,有态度的博客