小程序视图容器

常用的视图容器类组件：

view

• 普通视图区域

• 类似于 html 中的 div，是一个块元素

• 常用来实现页面的布局效果

属性说明：

• hover-class：指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

• hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态

• hover-start-time：按住后多久出现点击态，单位毫秒

• hover-stay-time：手指松开后点击态保留时间，单位毫秒

代码演示：

hgk.wxml 代码如下：

<view>a</view><view>b</view><view>c</view>

hgk.wxss 代码如下：

view{  width: 8rem;  height: 8rem;  margin: 1px;  background-color: aqua;}

运行结果

scroll-view

• 可滚动的视图区域

• 常用来实现滚动列表效果

属性说明

scroll-x：允许横向滚动

scroll-y：允许纵向滚动

upper-threshold：距顶部/左边多远时，触发 scrolltoupper 事件

lower-threshold：距底部/右边多远时，触发 scrolltolower 事件

scroll-top：设置竖向滚动条位置

scroll-left：设置横向滚动条位置

scroll-into-view：值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

scroll-with-animation：在设置滚动条位置时使用动画过渡

代码演示：

hgk.wxml 代码如下

<scroll-view scroll-y>  <view>a</view>  <view>b</view>  <view>c</view></scroll-view>

hgk.wxss 代码如下

view{  width: 8rem;  height: 8rem;  margin: 1px;  background-color: aqua;}scroll-view{  height: 16rem;}

给 scroll-view 添加固定高度，如果要横向滚动把scroll-view标签添加scroll-x属性添加固定宽度

运行结果

swiper 和 swiper-item

轮播图容器组件和轮播图 item 组件