三、构建UI界面

3.1视图容器组件

视图容器	可滚动视图区域	滑块视图容器	可移动视图容器	覆盖原生组件的视图容器
view	scroll-view	swiper	movable-view	cover-view

3.1.1 view视图容器

类似html中的div
属性：

属性	类型	默认值	说明
hover	Boolean	false	是否启用单击态
hover-class	String	none	指定按下去的样式类。当其值为none时，没有单击态效果
hover-start-time	Number	50	按住后多久出现单击态，单位毫秒
hover-stay-time	Number	400	手指松开后单击态保留时间，单位毫秒

3.1.2 scroll-view可滚动视图区域

scroll-view可滚动视图区域允许视图区域内容横向滚动或者纵向滚动
类似于浏览器的横向滚动条和垂直滚动条

属性	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左部多远时(单位px)，触发scrolltoupper事件
lower-threshold	Number	50	距底部/右部多远时(单位px)，触发scrolltolower事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscroll toupper	EventHandle		滚动到顶部/左边，会触发scrolltoupper事件
bindscroll tolower	EventHandle		滚动到底部/右边，会触发scrolltolower事件
bindscroll	EventHandle		滚动时触发，event.detail={ scrollLeft,scrollTop,scrollHeight, scrollwidth, deltax, deltaY)

3.1.3 swiper滑块视图容器

swiper滑块视图容器用来在指定区域内切换显示内容
常用来制作海报轮播效果和页签内容切换效果
属性

属性	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
bindchange	EventHandle		current改变时会触发change事件，event.detail={ current: current }

示例代码（海报轮播）

<view class="haibao">
  <swiper indicator-dots="{
    {findicatorDots}}" autoplay="{
    {autoplay}}}" interval="{
    {interval}}" duration="{
    {duration}}">
	<block wx:for="{
    {imgUrls}}">
		<swiper-item>
			<image src="{
    {item}}" class="silde-image" style="width:100%"></image>
		</swiper-item>
	</block>
  </swiper>
</view>

Page({
   
	data:{
   
		indicatorDots:true,
		autoplay:true,
		interval:5000,
		duration:1000,
		imgUrls:["../img/wx1.jpg", "../img/wx2.jpg", "../img/wx3.jpg"]}
})

示例代码（页签切换）

<view class="content">
	<view class="loginTitle">
		<view class="{
    {currentTab==O?'select':'default'}})" data-current="0" bindtap="switchNav">手机号登录</view>
		<view class="{
    {currentTab==1?'select':'default'}})" data-current="1" bindtap="switchNav">邮箱器录</view>
		<view class="{
    {currentTab==2?'select':'default'}})" data-current="2" bindtap="switchNav">爱课程登录</view>
	</view>
	<view class="hr"></view>
	<swiper current="{
    {currentTab}}" style="height:{
       {
       winHeight}}px">
		<swiper-item>
			<view style="margin-top:10px;border:lpx solid #cccccc;width:99%;height:200px;">这里是手机号登录区域</view>
		</swiper-item>
		<swiper-item>
			<view style="margin-top:10px;border:lpx solid #cccccc;width:99%;height:200px;">这里是邮箱登录区域</view>
		</swiper-item>
		<swiper-item>
			<view style="margin-top:10px;border:lpx solid #cccccc;width:99%;height:200px;">这里是爱课网登录区域</view>
		</swiper-item>
	</swiper>
</view>

Page({
   
	data:{
   
		currentTab:0,
		winWidth:0,
		winHeight:0
	},
	onLoad:function(options){
   
		var page = this;
		wx.getSystemInfo({
   
			success:function(res){
   
				console.log(res);
				page.setData({
   
					winWidth: res.windowWidth
				});
				page.setData({
   
					winHeight:res.windowHeight
				});
			}
		})
	},
	switchNav: function(e){
   
		var page = this;
		if(this.data.currentTab ==e.target.dataset.current){
   
			return false;
		}else {
   
			page.setData({
   
				currentTab:e.target.dataset.current});
		}
	}
})

.loginTitle {
   
	display:flex;
	flex-direction:row;
	width: 100%;
}
.select {
   
	font-size:12px;
	color:black;
	width:33%;
	text-align:center;
	height: 45px;
	line-height: 45px;
	border-bottom:5rpx solid green;
}
.default {
   
	font-size:12px;
	margin:0 auto;
	padding:15px;
}
.hr {
   
	border:1px solid #ccc;
	opacity:O.2;
}

3.1.4 movable-view可移动视图容器

• 该组件是一个可移动视图容器，可以在页面中做拖拽滑动
• 使用该组件时，需要先定义可移动区域movable-area，然后定义直接子节点movable-view，否则不能移动
• movable-area必须设置width和height属性，不设置默认为10px
• movable-view必须设置width和height属性，不设置默认为10px
• movable-view默认为绝对定位，top和left属性为Opx

属性

属性	类型	默认值	说明
direction	string	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	boolean	false	movable-view是否带有惯性
out-of-bounds	boolean	false	超过可移动区域后，movable-view是否还可以移动
x	number		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	number		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled	boolean	false	是否禁用
scale	boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min	number	0.5	定义缩放倍数最小值
scale-max	number	10	定义缩放倍数最大值
scale-value	number	1	定义缩放倍数，取值范围为0.5 - 10
bindchange	eventhandle		拖动过程中触发的事件，event.detail = {x, y,source}
bindscale	eventhandle		缩放过程中触发的事件，event.detail = {x, y,scale}

movable-view提供的两个特殊事件
①htouchmove
指初次手指触摸后的移动为横向移动
②vtouchmove
指初次手机触摸后的移动为纵向移动
注意:如果catch到这两个事件，则意味着touchmove事件也被catch

3.1.4 cover-view覆盖原生组件的视图容器

• cover-view、 cover-image是两个覆盖原生组件的视图容器
• cover-view是指覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image
• cover-image是指覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-yiew一样，支持嵌套在cover-view里

属性

属性	类型	必填	说明
scroll-top	number/string	否	设置顶部滚动偏移量，仅在设置了overflow-y: scroll成为滚动元素后生效
src	string		图标路径，支持临时路径、网络地址(1.6.0起支持)、云文件ID (2.2.3起支持)。暂不支持base64格式。
bindload	eventhandle		图片加载成功时触发
binderror	eventhandle		图片加载失败时触发

<video id="myVideo"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042