uni-app之视图容器【view、scroll-view】

最新推荐文章于 2024-07-30 22:17:31 发布

神之凝视

最新推荐文章于 2024-07-30 22:17:31 发布

阅读量1.3k

点赞数

分类专栏： Vue 微信小程序文章标签： vue

本文链接：https://blog.csdn.net/qq_27600723/article/details/106388262

版权

Vue 同时被 2 个专栏收录

14 篇文章 4 订阅

订阅专栏

微信小程序

9 篇文章 1 订阅

订阅专栏

一.简介

视图容器就是将页面分割为独立的、不同的部分。视图容器共包含：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>

执行效果：
在这里插入图片描述
向左拖拽效果：

向左上拖拽效果：

注意事项：

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