屏幕分为上下两部分,上面部分高度固定,比如 400rpx(单位可以指定为其他的比如px、upx等,高度也可以自己设定),下面部分为 scroll-view 占满剩余高度,两者宽度都是占满,效果图如下: 二、实现方法如下 经验证 APP 端和 H5端都可适用(易于看懂就直接上代码了),不管底部是有 tabbar 还是没有 tabbar 都兼容 <templa...
在用uniapp写这个pc端项目时遇到一个表格需要展示全部的数据,但是页面上只显示4条数据,刚开始用overflow-y: scroll;出现滚动条。 因为滚动条占用位置导致表格错位,上下不对齐。scroll-view组件还是出现滚动条。 重点来了!!! 在样式中引用这段代码,就可以解决啦!!! ::-webkit-scrollbar { display: none; width:...
1. 确认 scroll-view 组件的基本用法和属性 scroll-view 是uniapp 提供的用于滚动内容的组件,其基本用法如下: html <scroll-view scroll-y="true"> <!-- 滚动内容 --> </scroll-view> 其中scroll-y="true" 表示允许在 Y 轴方向上滚动。 2. 查找 uniapp 官方文档,了解如何设置...
最近在项目遇到swiper高度不能自适应,导致swiper-item 里面的内容过多时只能显示一部分,最终解决方案:<swiper><swiper-item><scroll-view:scroll-y="true":style="{height: clientHeight?clientHeight+'px':'auto'}">内容放在这</scroll-view></swiper-item></swiper> swiper-item {overflow: scroll; } 最后在...
我的第二个问题就是因为没有设置高度导致 scroll-top不生效,但是设置高度百分之百又满足不了区域滚动,设置百分之分有时还会错位 ---好了不比比,直接上代码,建议全部复制过去 <template> <view class="content flex-column"> <view class="top-view flex-center" @tap="clickEvnet(0)"> 点击...
// scroll-view的代码 class名为sv 使用:style动态绑定高度<scroll-viewscroll-y="true"class="sv":style="{height:navHeight+'px'}"><view class="listItem" v-for="(item,index) in tvArry" :key="index" @click="skip"><viewclass="leftBox"><image:src="item.themb"class="leftImg"></image...
</view> </scroll-view> 1. 2. 3. 4. 5. 6. 7. 8. 以上是例子: 解决办法只需要在scroll-view下的子元素class item加上vertical-align:top;就可以了 .scroll-view{ white-space:nowrap; .item{ width:160rpx; display:inline-block; margin-right:48rpx; ...
一、前言、scroll-view基本属性: 前言: 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几个展示的内容的数据都比较的多,因此为了页面的数据加载顺畅决定使用上拉加载(简单的说就是数据分页显示)。
</scroll-view> 确定 <template> export default { data() { return { height: 200 // 默认滚动高度 } }, mounted() { // 实际弹窗中应该是在弹窗显示时去计算高度,此处仅作示例,获取不到节点信息可以放到 $nextTick 中去获取 this.calcHeight() }, methods: { calcHeight(...