前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序基础-组件

小程序基础-组件

作者头像
达达前端
发布2019-11-29 12:13:19
4510
发布2019-11-29 12:13:19
举报
文章被收录于专栏:达达前端

file

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

⽂本的<text>组件、表示图像的<image>组件、表示视图容器的 <view>组件,表示链接的<navigator>组件

组件的属性

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

轮播效果

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

代码语言:javascript
复制
<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>
代码语言:javascript
复制
imgUrls: [
  'https:40',
  'https:640',
  'https:640'
],
interval: 5000,
duration: 1000,
indicatorDots: true,
indicatorColor: "#ffffff",
activecolor:"#2971f6",
autoplay: true,

audio组件

audio组件是⾳频组件

代码语言:javascript
复制
<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{music
info.name}}" author="{{musicinfo.author}}" controls></audio>
代码语言:javascript
复制
 musicinfo: {
      poster: 'http://'
      name: '此时此刻',
      author: '许巍',
      src: ''
},

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

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

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

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

video组件

video组件⽤来表示视频

代码语言:javascript
复制
<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组件之上

地图组件

代码语言:javascript
复制
<map
  id="myMap"
  style="width: 100%; height: 300px;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  covers="{{covers}}"
  show-location
></map>
代码语言:javascript
复制
latitude: 22.540503
 longitude: 113.934528,
 markers: [{      id: 1,      latitude: 22.540503,      longitude: 113.934528,      title: '深圳腾讯⼤厦'    }],

在地图上标记多个点

代码语言:javascript
复制
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 前端相关的技术文章、工具资源、精选课程、热点资讯。


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


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档