uniapp中，uni-list组件撑开页面的解决办法

最新推荐文章于 2024-06-20 22:03:11 发布

foundation2010

最新推荐文章于 2024-06-20 22:03:11 发布

阅读量750

点赞数

文章标签： uni-app list html

本文链接：https://blog.csdn.net/foundation2010/article/details/129727548

版权

文章探讨了在uni-app中使用uni-list组件时遇到的问题，即当设置margin-bottom属性后，会影响上方区域的高度。作者发现通过添加overflow:scroll属性到uni-list可以解决这个问题，但同时还在研究其他可能的影响和解决方案。

摘要由CSDN通过智能技术生成

           </uni-list-item>
       </uni-list>
       <button
           style="width: 80%;position: fixed;bottom: 0%;background-color: chocolate;height: 80rpx;margin-bottom: 20rpx;">占位按钮</button>
   </view>
</template>

关键在于--》 <uni-list>中增加属性overflow: scroll；

存在的问题：<uni-list>中的属性margin-bottom，会导致占位1区域的高度被压缩，还在研究中。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

foundation2010

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp-table中改版uni-table插件

07-03

在 UniApp 中，`uni-table` 是一个用于展示数据表格的组件，它提供了基础的数据展示和操作功能。然而，随着项目需求的多样化，有时我们需要对原生组件进行扩展和定制以满足特定场景的需求。标题"uniapp-table中...

uniapp扩展组件---uni-list

m0_75047254的博客

07-29

9070

组件名：uni-list代码块：uListuListItemuni-badgeuni-icons点击下载&安装。

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

uniapp组件-ui-list列表

06-20

4096

uni-list是Uni-App框架内置的一个列表组件，它以简洁、灵活的方式封装了列表展示逻辑，支持多种列表项布局，如文本、图标、图片等组合展示。通过uni-list，开发者可以轻松创建美观、响应式的列表界面，无需从零开始编写复杂的布局代码，大大提升了开发效率。uni-app官网uni-list 列表 - DCloud 插件市场uni-list组件的强大之处在于其高度的可定制性。除了基本的文本展示，它还支持图片、图标、开关、滑动操作等多种元素的嵌入，以及不同的布局模式（如左图右文、上下结构等）。

uniapp中列表（list）组件封装

blackhub的博客

07-10

4065

uniapp uni-calendar日期组件多选

03-07

uniapp uni-calendar日期组件多选内附参考使用代码

28套-uniapp项目源码-涵盖仿商城&仿官网&组件封装等uni-app项目.zip

05-22

uniapp以其“一次编写，多端发布”的特性，在市场中脱颖而出。它不仅支持iOS、Android、H5、小程序等多个平台，还提供了丰富的API和组件，大大减少了开发者的学习成本和时间投入。从市场趋势来看，uniapp的发展...

uniapp框架-uniapp封装控件-7种图表漂亮丰富uniCharts-uni-app项目源码-vue语法格式.zip

05-21

UniApp开发前景分析：专业视角引领未来随着移动互联网的迅猛发展，跨平台应用开发框架UniApp以其独特的优势，展现出广阔的开发前景。 UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和...

uniapp-chat:借助uni-app开发的 chat聊天界面

05-11

在mui中有chat界面的例子，升级到uni-app后，没有类似的模板，因此模仿写了一个。遇到了一些坑，在此一一记录下来。当然，由于是新手，可能有些坑可以避开。 scroll-view高度的设置输入内容后，必然要在对话界面的...

uniapp实现列表动态添加

u013023845的博客

03-29

1709

uniapp实现列表动态添加

uniapp 使用组件-uni-list聊天列表

weixin_46324536的博客

11-17

3626

uniapp 使用组件-uni-list聊天列表

关于uniapp-nvue页面list的子组件的用法

qq_55223496的博客

09-23

2612

uniapp中的list用法以及子组件注意事项，两种上拉触发方法

uniapp制作app与小程序前端——list表单配置

hk_hkl的博客

05-11

1173

手把手玩转uniapp前端No.7

uniapp css width宽度100%导致界面右边超出屏幕或者padding导致出现滚动条

ScottePerk的博客

06-27

3700

这实际上是一个纯粹的css问题，在小屏幕上非常容易出现。原因就是你的view使用了padding，而padding是算自身宽高的，而使用width 100%的时候，就变成了100% width加上padding的内容。所以就会在右边多出一部分内容。解决办法就是设置box-sizing: border-box。默认是box-sizing: content-box;

uniapp 利用uni-list 和 uni-load-more 组件上拉加载列表

古猿写代码

03-16

2947

最后一步，还需开启上拉加载事件。

解决u-list滚动时会卡顿几次的问题

javaltt的博客

08-15

1717

解决u-list滚动时的问题

uni-app使用踩坑记录总结（持续更新）

布克吉的博客

07-11

1781

uniapp 1.动态样式display问题 2.动态切换背景图片编辑 3.uni-list列表添加点击事件

uniapp——新闻列表（uni-list、uni-list-item）--顶部下拉刷新--上拉加载更多--顶部提示语

wy313622821的博客

12-07

2万+

1、新闻列表模式效果图：代码 <template> <uni-list>  <uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date"> <!-- 通过v-slot:

uniapp注册uni-list组件

07-28

在UniApp中，你可以使用uni-list组件来创建列表。要注册uni-list组件，你可以按照以下步骤进行操作： 1. 在你的项目中找到`components`文件夹，如果没有则新建一个。 2. 在`components`文件夹中创建一个新的文件夹，用于存放uni-list组件相关的文件。 3. 在这个新建的文件夹中，创建一个名为`uni-list.vue`的文件，用于编写uni-list组件的代码。 4. 在`uni-list.vue`文件中，使用Vue的组件语法编写uni-list组件的代码。例如： ```vue <template> <view>  </view> </template> <script> export default { name: 'uni-list', // 组件的属性、方法等 } </script> <style> /* 这里编写uni-list组件的样式 */ </style> ``` 5. 在需要使用uni-list组件的页面中，引入并注册uni-list组件。例如，在一个名为`index.vue`的页面中： ```vue <template> <view>  <uni-list></uni-list> </view> </template> <script> import uniList from '@/components/uni-list/uni-list.vue' export default { components: { uniList }, // 页面的其他逻辑代码 } </script> <style> /* 这里是页面的样式 */ </style> ``` 这样就完成了uni-list组件的注册和使用。你可以根据自己的需求，在`uni-list.vue`文件中编写uni-list组件的具体内容和样式。