本文作者:DurkBlue

关于小程序当中video小程序基础-组件的使用

DurkBlue 2019-11-27 1687 抢沙发
关于小程序当中video小程序基础-组件的使用摘要: 表示图像的组件、表示视图容器的 组件,表示链接的组件组件的属性公共属性是指小程序所有的组件都有的属性,如id、class、style轮播效果小程序有专门的轮播组件swip...

关于小程序当中video小程序基础-组件的使用  第1张

表示图像的关于小程序当中video小程序基础-组件的使用  第2张组件、表示视图容器的 组件,表示链接的组件

组件的属性

公共属性是指小程序所有的组件都有的属性,如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" 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="{{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:指定x系列坐标点,根据 points 坐标数据组成闭合多边形,,如圈出实际的范围

polyline:指定y系列坐标点,从数组第一项连线到最后一项,如跑步的路线


此篇文章由DurkBlue博主亲自发布,转载请注明来处哟
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-11-27
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,1687人围观)参与讨论

还没有评论,来说两句吧...