view:
hover-class:指定按下去的样式类
hover-start-time:
按住后多久出现点击态,单位毫秒
hover-stay-time:手指松开后点击态保留时间,单位毫秒
.green_hover{
border: 5px solid black;
}
<view class='comContent' hover-class='green_hover' hover-start-time='100' hover-stay-time='10000'>
<view class='subCom'>
</view>
</view>
scroll-view:可滚动视图区域
content必须大于view本身的高度或宽度,滚动条才显示
upper-threshold:距顶部/左边多远时(单位px),触发 scrolltoupper 事件(这个设置不错)
lower-threshold:距底部/右边多远时(单位px),触发 scrolltolower 事件
<scroll-view scroll-y class='scrollContent' bindscrolltoupper='upper' upper-threshold='30' >
<view id="green" ></view>
<view id="red" ></view>
<view id="yellow"></view>
</scroll-view>
swiper:滑块视图容器
这个类似iOS中的轮播器,可修改是否显示指示器,颜色等,但貌似没有设置指示器大小的属性
<swiper indicator-dots="true"
autoplay="true" interval="5000" duration="500" circular='true'>
<block wx:for= "{{[ '../images/bg.png', '../images/hu.png','../images/huSelect.png','../images/me.png']}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
注意:其中只可放置<swiper-item/>
组件,否则会导致未定义的行为
movable-view:可移动的视图容器,在页面中可以拖拽滑动.其考虑到了很多物理特性
movable-view必须在
<movable-area/>
组件中,并且必须是直接子节点,否则不能移动而movable-area 必须设置width和height属性,不设置默认为10px
movable-view 默认为绝对定位,top和left属性为0px
当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑
inertia:movable-view是否带有惯性
friction:摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值
<movable-area style="margin-top:10; height: 200px; width: 200px; background: black;">
<movable-view style="height: 50px; width: 50px; background: blue;" direction="all">
</movable-view>
</movable-area>
cover-view:覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map
、video
、canvas
、camera
,只支持嵌套cover-view
、cover-image
。
注意的是文档给出的例子,当vedio未播放的时候(第一次),放在vedio上面控件时间不响应,应该是vedio这个标签的一个梗
<video id='myVideo' src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' controls='true' enable-danmu='true' >
<cover-view class='controls'>
<cover-view class='play' bindtap='play'>
<cover-image src='../images/play.png' class='img'></cover-image>
</cover-view>
<cover-view class='play' bindtap='pause'>
<cover-image src='../images/pause.png' class='pauseImg'></cover-image>
</cover-view>
</cover-view>
</video>
rich-text:富文本
nodes
现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点
- 全局支持class和style属性,不支持id属性。
- nodes 不推荐使用 String 类型,性能会有所下降
- rich-text 组件内屏蔽所有节点的事件。
- name 属性大小写不敏感
- 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除,受信任的html节点请看官方文档
- img 标签仅支持网络图片
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'width : 100px; height : 100px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}],
<rich-text nodes='{{nodes}}' ></rich-text>
progress:进度条
show-info:在进度条右侧显示百分比
active-mode:动画从头播,设置这个属性,必须设置active为true,否则不起作用
<progress percent='40' stroke-width='6' color='pink' active-mode='backwards' active show-info></progress>