四、组件
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()
}
})