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.