一.简介

视图容器就是将页面分割为独立的、不同的部分。视图容器共包含:view、scroll-view、swiper、movable-view、cover-view 、cover-image。

二.view

视图容器,相当于html中的div。属性说明如下:
在这里插入图片描述
备注:如果使用

组件编译时会被转换为 。

<view class="text">
  Hello World
</view>

执行效果:
在这里插入图片描述

三.scroll-view

可滚动视图区域,可控制横向滚动和纵向滚动。属性说明:
在这里插入图片描述

<!-- 设置样式时外面的样式要大于里面的模块才有显示效果 -->
<scroll-view class="srcoll-view" scroll-x="true" scroll-y="true" scroll-left="120"> 
	<view id="left" class="scroll-view-left">
		111
	</view>
	<view id="right" class="scroll-view-right">
		222
	</view>
</scroll-view>

执行效果:
在这里插入图片描述
向左拖拽效果:
在这里插入图片描述
向左上拖拽效果:
在这里插入图片描述
注意事项:

  1. 5+APP和小程序中,请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
  2. scroll-into-view 的优先级高于 scroll-top
  3. 使用 scroll-view 会和原生下拉刷新造成冲突,所以在使用 scroll-view 的地方不建议使用下拉刷新,也不建议监听 onPullDownRefresh 事件
  4. 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐