uni-app x 学习系列（五）—— 视图容器 之 View 视图组件

<view>是UNI-APP中布局的基本元素，类似于HTML中的<div>标签，主要用于创建块级容器。

示例：index.uvue

<template><viewclass="container"><viewclass="header"><text>轮播图展示</text></view><view><!-- 轮播图 --><swiper><swiper-item><imageclass="carousel"src="/static/logo.png"></image></swiper-item><swiper-item><imageclass="carousel"src="/static/logo.png"></image></swiper-item></swiper></view><viewclass="categories"><viewclass="item"><textclass="item-text">第一个视图</text></view><viewclass="item"><textclass="item-text">第二个视图</text></view><viewclass="item"><textclass="item-text">第三个视图</text></view></view></view></template><script>exportdefault{data(){return{}},onLoad(event:OnLoadOptions){// 类型非必填，可自动推导console.log('my 页面加载')},onShow(){console.log('my 页面显示')},onHide(){console.log('my 页面隐藏')},methods:{}}</script><stylescoped>.header{margin:10px 0;padding:10px;text-align:center;}.carousel{height:300px;margin:10px auto 0 auto;}.item{margin:10px 0;padding:10px;border:1px solid #ccc;}.item-text{font-size:16px;color:#333;}</style>

页面效果：