微信小程序开发之八 —— swiper、video、map组件与cover效果

学习前后

上一篇：微信小程序开发之七 —— Flex、Grid与List布局
下一篇：微信小程序开发之九 —— JavaScript入门

swiper

官方文档：swiper
属性值较多，这里列举待会用到的几个

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boollean	false	是否自动切换
interval	number	5000	自动切换时间间隔
duration	number	500	滑动动画时长
circular	boolean	false	是否采用衔接滑动

组件基本没什么好解释的，就是会用就行，忘了就看官方文档，不需要特意去记住。
示例：
.wxml

<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}}" circular="{
     {circular}}">
          <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>

.js,在data里面添加

 imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    interval: 5000,
    duration: 1000,
    indicatorDots: true,
    indicatorColor: "#ffffff",
    activecolor: "#2971f6",
    autoplay: true,
    circular: true,

效果图：

video

官方文档：video

这里也列举几个：

属性	类型	默认值	说明
src	string	/	要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID
controls	boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
autoplay	boolean	false	是否自动播放
loop	boolean	false	是否循环播放
muted	boolean	false	是否静音播放
initial-time	number	0	指定视频初始播放位置
poster	string	/	视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效
title	string	/	视频的标题，全屏时在顶部展示

这个比较多，了解一下就可以
示例：

<video id="daxue" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" autoplay loop muted initial-time="100" controls event-model="bubble"></video>

效果：

cover效果

我们也可以把view、图片组件覆盖在地图map或视频video组件之上。比如我们希望在视频的左上角显示视频的标题以及在右上角显示商家的logo，就可以使用cover效果。
示例：
.wxml

<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls event-model="bubble">
   <view class="covertext">腾讯大学：腾讯特色学习交流平台</view>
   <image class="coverimg" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/portal/css/img/nav/logo-bg-color.svg" ></image>
</video>

.wxss

 .covertext{
     
  width: 500rpx;
  color: white;
  font-size: 12px;
  position: absolute;
  top:20rpx;
  left:10rpx;
}
.coverimg{
     
  width:100rpx;height:23rpx;
  position: absolute;
  right:10rpx;
  top:10rpx;
}

效果：

map

官方文档：map

属性	类型	默认值	说明
longitude	number	/	中心经度
latitude	number	/	是
markers	Arrary.	标记点
polyline	Array.	路线

示例：
.wxml

<map
  id="myMap"
  style="width: 100%; height: 300px;"
  latitude="{
     {latitude}}"
  longitude="{
     {longitude}}"
  markers="{
     {markers}}"
  covers="{
     {covers}}"
  show-location
></map>

.js

latitude: 22.540503,
    longitude: 113.934528,
    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'
      },
    ],

效果

提示

本来还想写个audio组件，不过现在audio已经停止维护了，所以audio要用另一种形式实现了。