微信小程序学习（3）

四、组件

1. 基础组件介绍

一张视图页面是有一个或多个组件构成
组件有 <开始标签></结束标签>
每个组件都包含着一些公用属性

公用属性：

属性	类型	描述	注释
id	String	标识列	主要用来保持界面唯一
class	String	样式	在wxss定义对应样式类
style	String	内联样式	可以动态设置
hidden	Boolean	是否显示	默认显示，直接加载 wx:if 懒加载
data-*	Any	自定义属性	组件触发事件，会发送到事件处理函数，之后会介绍属性值传输
bind* / catch*	EventHandler	组件事件	bind* 冒泡事件, catch* 非冒泡事件

2. 视图容器

2.1 view 组件

属性值：

hover-class: 按下去时触发样式，默认值 “none”
hover-stop-propagatiori: 判断是否阻止冒泡, 默认值 “false”
hover-start-time: 按住后多少秒出现点击态，单位毫秒
hover-stay-time: 手指松开后保留时间，单位毫秒
aria-label 无障碍访问, (属性)元素的额外描述，简单点说就是有点像提示语句
aria-role 无障碍访问, (角色)标识元素的作用, 就是将一个标签当另一个标签用，很少有人会这么弄的

<view class="a" hover-class="a-hover">
  hehe
  <view class="b" hover-class='b-hover' hover-stop-propagation="true" hover-start-time='500' hover-stay-time="2000" aria-label="类似input label">
  你好
  </view>
  <view class="c">插入空白</view>
    <view class="b" hover-class='b-hover' hover-stop-propagation="true" hover-start-time='1000' hover-stay-time="1000" aria-label="没多大用处">
  你好
  </view>
</view>

.a {
  background-color: yellow;
  display: flex;
  flex-direction: row;
}
.a-hover {
  background-color: white;
}
.b {
  background-color: pink;
  flex: 1;
}
.b-hover {
  background-color: red;
  flex:2;
}
.c{
  flex: 1;
}

2. 2 scroll-view 组件（可滚动）

scroll-x/scroll-y : 可横线/纵向滚动默认值 false
upper-threshold:顶部/左边多远时（单位px，2.4.0起支持rpx），触发 scrolltoupper 滚动到顶部事件
lower-threshold：滚动到底部/右边多远时（单位px，2.4.0起支持rpx）,触发 scrolltolower 滚动到底部事件
bindscrolltoupper：滚动到顶部事件，单位同上
bindscrolltolower：滚动到底部事件，单位同上
scroll-top/scroll-x: 定义滚动条距离顶部/左边的位置，单位同上
enable-back-to-top: 移动端双击标题栏回到顶部，默认值 false, 测试需要用手机，测试号的APP不支持手机预览
scroll-with-animation: 动画过渡滚动条
bindscroll: 滚动出发事件，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY},
scroll-into-view：滚动到对应子元素 id, 不可以与 scroll-top 同用

<!-- index.wxml -->
<!-- scroll-top="250" -->
<scroll-view scroll-y="true" style="height:300rpx" upper-threshold="0" bindscrolltoupper="scrolltoupper" lower-threshold="0" bindscrolltolower="scrolltolower" enable-back-to-top="true" scroll-with-animation="true" bindscroll="scroll" scroll-into-view="e" >
  <view style="background-color:white; height:150rpx;width:100%">a</view>
  <view style="background-color: red; height:150rpx;width:100%">b</view>
  <view style="background-color: pink; height:150rpx;width:100%">c</view>
  <view style="background-color:black; height:150rpx;width:100%">d</view>
	<view style="background-color:white; height:150rpx;width:100%" id="e">e</view>
</scroll-view>

//index.js
//获取应用实例
Page({
  data: {
   
  },
  scrolltoupper() {
    console.log('滚动到顶部')
  },
  scrolltolower() {
    console.log('滚动到底部')
  },
  scroll() {
    console.log('滚')
  }
})

如果你想设置横向滚动，则需要在父级开启 flex布局 display: flex，设置white-space: nowarp 不换行，且子级的元素必须是行内块级元素，即设置 dispaly:inline-block 其他属性设置类似

一般如果我们需要做分类导航栏时，有时候分类栏要求一行可滑动，就可以使用scroll-view 属性 scroll-x 设置为 true

<scroll-view class="box" scroll-x="true" scroll-left="250">
  <view class="all" style="background-color:white;">a</view>
  <view class="all" style="background-color:red;">b</view>
  <view class="all" style="background-color:pink;">c</view>
  <view class="all" style="background-color:black;">d</view>
	<view class="all" style="background-color:white;">e</view>
</scroll-view>

.all {
  height:300rpx;
  width:250rpx;
  display: inline-block;
}
.box {
  display: flex;
  white-space:nowrap;
}

2.3 swiper 组件 (轮播图)

一般就是做首页的推荐，或者是广告

indicator-dots: 面板指示点，默认值 false
autoplay：自动播放，默认值 false
interval：自动切换时间间隔，默认值 5000 毫秒
duration：动画滑动时长，默认值 500 毫秒

swiper-item:

item-id: 标识符

<!-- 动态绑定数据与轮播状态 -->
<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>
<!-- 一下是对状态的控制 -->
<button bindtap="changeIndicatorDots">indicator-dots</button>
<button bindtap="changeAutoplay">autoplay</button>
<!-- slider 滑块组件 -->
<slider bindchange="intervalChange" show-value min="500" max="2000" />
<slider bindchange="durationChange" show-value min="1000" max="10000" />

Page({
  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'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

2.4 movable-area & movable-view 配套使用

2.4.1 movable-area 可移动区域

必须设置 width 和 height，默认 10 px

2.4.2 movable-view 可移动容器

direction: 可移动方向, 属性值有 none(默认值)、all、vertical、horizontal
inertia: 是否带惯性，默认值 false
friction：摩擦系数，默认值 2，值必须大于等于2，与 inertia 配合使用
out-of-bounds: 超出可移动区域化是否还可以移动，默认值 false
damping：阻尼系数，默认值 20，与 out-of-bounds 配合使用，数值越大，回弹越快
x / y ：初始化位置，从左向右 / 从上到下的距离
disable：是否禁用，默认值 false
scale: 是否支持缩放
scale-min / scale-max / scale-value: 缩放最小倍数 / 缩放最大倍数 / 缩放范围（取值范围： 0.5 ~ 10）
bindchange：拖动事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
bindscale：缩放事件, event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回

movable-area 控制 movable-view 的可移动区域，一般用于播放视频时，看评论，将视频缩放成一个小盒放在一边，不耽误看评论和视频

<movable-area class="father-size">
  <movable-view 
  class='size' direction="all"
  inertia="true" out-of-bounds="true" 
  x = "50" y = "100" damping="100"
  friction="100">
  </movable-view>
</movable-area>

.father-size {
  width:100%;
  height:650rpx;
  background-color: grey;
}
.size {
  width:100rpx;
  height:100rpx;
  background-color: green;
}

2.5 cover-view & cover-image

2.5.1 cover-view: 覆盖在原生组件之上的文本视图

可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button

2.5.2 cover-image: 覆盖在原生组件之上的图片视图

可覆盖的原生组件同cover-view

一般用来在媒体层上展示其他信息，如广告，视频暂停播放按钮等等

<video
  id="myVideo"
  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  controls="{{false}}"
  event-model="bubble"
>
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/path/to/icon_play" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/path/to/icon_pause" />
    </cover-view>
    <cover-view class="time">00:00</cover-view>
  </cover-view>
</video>

.controls {
  position: relative;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  display: flex;
}
.play,
.pause,
.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  line-height: 50px;
}
.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}

Page({
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play() {
    this.videoCtx.play()
  },
  pause() {
    this.videoCtx.pause()
  }
})