uni-app视图容器

最新推荐文章于 2025-03-22 20:31:02 发布

海绵杨宝宝

最新推荐文章于 2025-03-22 20:31:02 发布

阅读量791

点赞数

分类专栏： uni-app学习笔记

本文链接：https://blog.youkuaiyun.com/qq_41820577/article/details/103684130

版权

uni-app学习笔记专栏收录该内容

2 篇文章

订阅专栏

view

view:相当于HTML中的div，独占一行，不设置宽度时，宽占满整个屏幕

<view hover-class='click' hover-start-time='1000' hover-stay-time='1000'>1</view>

hover-class：相当于设置了一个class名，可以在style标签中设置样式，这个样式会在点击元素时生效

:hover-start-time='1000'：设置点击多长时间后样式生效，注：在属性前面必须加上“：”，不然控制台会警告如下：

vue.runtime.esm.js:619 [Vue warn]: Invalid prop: type check failed for prop 

"hoverStartTime". Expected Number with value 1000, got String with value "1000".

:hover-stay-time='1000'：设置点击结束后样式生效维持的时间，同样在属性前面需要加上“：”

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

海绵杨宝宝

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app滑块视图容器（十一）

A_nanda的博客

06-26

603

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。一般用于左右滑动或上下滑动，比如banner轮播图。

uni-app简易介绍

LFE76的博客

06-17

1448

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

参与评论您还未登录，请先登录后发表或查看评论

第五章：uniapp的组件使用

Blue54的博客

02-12

1667

关于微信开发小程序app报错：./pages/xxx/xxx.wxml not found解决：开发者工具更新日志 | 微信开放文档先回退到这个版本案例1： 1.根据uniapp框架文档自己选择：例如：text组件：简单使用：代码放在xxx.vue文件中： tips：view会独占一行。view需要有一个根view包裹（最外层要有一个view包裹，不能两个view同级，不然会报错。 <template> <view> <view> &lt.

微信小程序之----组件

weixin_30323961的博客

10-26

144

1.view 把文档分割为独立的、不同的部分。 view组件类似于html中的div标签，默认为块级元素，独占一行，可以通过设置display:inline-block改为行级元素。 view.wxml代码如下： <view class="outerView"> <view class="innerView1"></view> ...

uni-app组件（基础布局容器）

最新发布

m0_59971110的博客

03-22

203

类似于传统的div，用于包裹元素。

微信小程序开发（二）——元素选择器、tabbar底部导航栏

苦作舟的空城机

06-26

2509

关于WXML和WXSS的使用 WXML就相当于HTML，WXSS就相当于CSS。在WXML中，view相当于HTML中的div标签。属性：加在开始标签里 view是一个块级标签，独占一行 text标签相当于HTML中的span标签，行内元素标签的分类:单标签,双标签单标签:image 双标签:view,text 其中image组件默认宽度300px、高度225px。 ...

微信小程序实现瀑布流布局

青衫折扇的博客

05-08

2177

小程序实现瀑布流近期在做APP转成小程序的相关开发，需将APP里面的部分页面抽离出来，做成小程序。其中有个页面是瀑布流(参差不齐的多栏布局)的形式。 Android客户端一般是通过RecyclerView的方式来进行实现，但在小程序中并没有类似的控件，所以我们只有通过自己的改编来进行实现。特此记录！实现效果如图一：需求分析页面主要分成两列，每个条目的高度不固定，条目主要...

自定义ViewGroup 从零单排（一）

LikeTheOne的博客

02-24

430

一、概述 1.ViewGroup的职责是什么？（1）放置View的容器（2）给childView计算出建议的宽和高和测量模式（为什么只是建议的宽和高，而不是直接确定呢，别忘了childView宽和高可以设置为wrap_content，这样只有childView才能计算出自己的宽和高）（3）决定childView摆放的位置（通过调用子View的layout（l，t，r，b）方法，让孩子

uni-app列表项实现左划操作功能

02-25

`<swipe>`组件用于创建一个可以左右滑动的视图容器，通常用于实现类似轮播图的效果。在此场景下，我们可以利用它的滑动特性来实现左滑操作。 ```html <uni-list> <uni-list-item v-for="(item, index) in items...

uni-app：mescroll-nui下拉刷新组件

09-08

首先，mescroll-nui是基于MeScroll库的一个uni-app插件，MeScroll是一个高性能、易用的下拉刷新、上拉加载插件，适用于各种滚动容器。在uni-app项目中引入mescroll-nui，可以为你的应用提供流畅的刷新和加载体验，...

uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip

09-30

`uiscrollview`是uni-app提供的一种滚动视图容器，用于展示超过视窗大小的内容，支持横向和纵向滚动。在这个场景中，我们利用`uiscrollview`的横向滚动特性，实现菜单项的左右滑动浏览。要计算每个子元素的宽度，...

uniapp view容器自动换行&&溢出隐藏

aoteman_web的博客

03-08

1万+

view容器文本过长不做任何css修饰情况下 view容器自动换行 word-wrap: break-word; word-break: break-all; white-space: pre-line; 效果：显示全部文字，不是我想要的效果。设置固定行数，溢出部分用省略号代替 // 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 display: -webkit-box; // 设置或检索伸缩盒对象的子元素的排列方式。 -webkit-box-orient:vertical; // 用省

uni-app笔记 view组件 button按钮 image组件

u013470619的博客

09-19

2296

1、view组件 view相当于html中的div 独占一行 (view在为空时不会独占一行) <view class="box" hover-class="box-active">  </view> <view class="box2" hover-class="box2-active" > <!--由于事件冒泡点击里面的view 外面的vi

小程序View内的文字不换行（cover-view）

hahahhahahahha123456的博客

07-25

1698

今天发现View内的文字一行过去直接被屏幕右边吃掉，没有预期的换行，设置width也不管用，最后用它解决了 1. white-space:pre-line（不会保留空白和tabs） 2. white-space:pre-wrap（会保留空白和tabs） .roomDesc { width: 710rpx; height: 184rpx; background: rgba(240...

uni-app view组件

weixin_49393290的博客

11-23

1531

1、独占一行相当于一个div 效果图 2、做一个盒子，然后给其填充颜色 3、点击盒子变色例1 效果图：一点变成例2 突然冒泡效果图点击前点击后加一个这个再点击的时候点击绿色盒子时候变红色，外侧不受影响，外侧同理。例3 在hober-start-time前面要加一...

uni-app 如何设置web-view 不全屏，不自动铺满，动态控制web-view的高度,控制内容是否可以缩放

授人以渔的博客

07-15

1万+

内容写在onload里面，如果是初始化的时候控制，其他位置控制可以写在其他方法中 var height=0;//定义动态的高度变量，如高度为定值，可以直接写 uni.getSystemInfo({ //成功获取的回调函数，返回值为系统信息 success: (sysinfo) => { height = sysinfo.windowHeight;//自行修改，自己需要的高度此处如底部有其他内容，可以直接---(-50)这种 }, complete: () => { } }); var cu..

uni-app中view组件的基本使用

Acapplella的博客

07-27

1414

view视图容器组件的用法 View 视图容器，类似于 HTML 中的 div 001 - 组件的属性 002 - 代码案例 <view class="box2" hover-class="box2_active"> <view class='box1' hover-class='active' hover-stop-propagation :hover-start...

uniapp中的scroll-view换行问题

qq_36893984的博客

03-02

2535

<view class="navBox"> <scroll-view scroll-x="true" class="scrollBiew" > <view class="currBox" v-for="item in navbox" :key="item.id" @tap="clickNav(item.id)" :class="item.id==n...

微信小程序中使view占满整个屏幕高度的实现方法