16. 视图容器

于2023-06-15 11:41:23发布

view

视图容器

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

例子：

<view>
    <view class="myview" hover-class="myviewHover" hover-start-time="50" hover-stay-time="1000"></view>
</view>

wxss

.myview {
  width: 100px;
  height: 100px;
  background: red;
}

.myviewHover {
  background: green;
}

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（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。该功能需要真机
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过wxss设置 height

例子：

wxml

<scroll-view 
  class='scroll-view' 
  scroll-y
  upper-threshold="50"
  bindscrolltoupper="scrolltoupper"
  lower-threshold="50"
  bindscrolltolower="scrolltolower"
  scroll-with-animation
  enable-back-to-top
  scroll-into-view="item6"
  bindscroll="bindscroll"
>
    <view class='view-item' style='background: green;'>1</view>
    <view class='view-item' style='background: orange;'>2</view>
    <view class='view-item' style='background: pink;'>3</view>
    <view class='view-item' style='background: silver;'>4</view>
    <view class='view-item' style='background: blue;'>5</view>
    <view class='view-item' id="item6" style='background: red'>6</view>
</scroll-view>

Page({
  scrolltoupper() {
    console.log('scrolltoupper');
  },
  scrolltolower() {
    console.log('scrolltolower');
  },
  bindscroll(e) {
    console.log(e)
  }
})

wxss

.scroll-view {
  height: 800rpx;
}
.view-item {
  height: 250rpx;
}

Bug & Tip

1. 请勿在scroll-view中使用textarea、map、canvas、video组件

2. scroll-into-view的优先级高于scroll-top

3. 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefresh

4. 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部

swiper

滑块视图容器

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

easing-function 的合法值

值	说明
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

例子：

wxml

<view>
  <swiper 
    indicator-dots="{{ cf.indicatorDots }}" 
    indicator-color="{{ cf.indicatorColor }}" 
    indicator-active-color="{{ cf.indicatorActiveColor }}"
    autoplay="{{ cf.autoplay }}"
    interval="{{ cf.interval }}"
    circular="{{ cf.circular }}"
    vertical="{{ cf.vertical }}"
    previous-margin="{{ cf.previousMargin }}"
    next-margin="{{ cf.nextMargin }}"
    display-multiple-items="{{ cf.displayMultipleItems }}"
  >
    <swiper-item style="background: red;">1</swiper-item>
    <swiper-item style="background: green;">2</swiper-item>
    <swiper-item style="background: blue;">3</swiper-item>
  </swiper>
</view>

Page({
  data: {
    cf: {
      indicatorDots: true,
      indicatorColor: '#fff',
      indicatorActiveColor: '#c00',
      autoplay: true,
      interval: 1000,
      circular: true,
      vertical: true,
      previousMargin: '0px',
      nextMargin: '0px',
      displayMultipleItems: 2,
    }
  }
})

16. 视图容器

view

scroll-view

swiper

movable-area

cover-view

cover-image