ion-content无法滚动问题

最近碰到一个问题,页面上部需要固定,下部设定ion-content可滚动,但实际发现无法滚动,找了N多资料,什么

scroll='false',overflow-scroll='true',

添加配置js scroll,

一律完全没效果,没有办法 只能自己去扒元素样式,看滚动条高度,经过一番努力,终于发现一个崩溃的事实,为了让ion-content内容不被上部固定部分覆盖,给了内容一个margin-top,之前内容设置了高度百分百,这就造成,在多出视野的部分还是有内容的盒子,而众所周知,出现滚动条是内容高于盒子高度以后会发生的,所以造成了视野上是内容超出了,实际上内容部分还没被填满,所以出现了这种尴尬的事情,好久没有碰到头疼问题,最近一次性来了好多,以此记录一下,可以去搞下个东东了,唉,心疼自己! 

`uni-scroll-view-content` 是 UniApp 中的一个组件,它用于定义滚动视图的内容区域。如果你想要单独设置其样式,可以使用 CSS 或者 Vue 的 scoped CSS 来针对这个组件应用定制样式。 **CSS 方式:** 在项目的全局 CSS 文件(如 `app.css`)或者单独的 CSS 文件中,添加针对 `.wx-scroller-content` 类的选择器,例如: ```css .wx-scroller-content { /* 样式属性 */ background-color: #f0f0f0; font-size: 16px; color: #333; } ``` 然后在你的 Vue 组件模板里引用这个类,例如: ```html <template> <uni-scroll-view class="custom-scroll"> <view class="wx-scroller-content" style="padding: 10px;"> <!-- 内容 --> </view> </uni-scroll-view> </template> ``` **Vue 非 scoped CSS (全局样式):** 如果是在单文件组件的 `<style>` 标签内直接编写样式,需要使用 `::v-deep` 或 `>>>` (取决于版本) 进行穿透: ```html <style> ::v-deep .uni-scroll-view .wx-scroller-content { /* 样式属性 */ background-color: #f0f0f0; font-size: 16px; } </style> ``` **Vue scoped CSS (局部样式):** 对于每个组件内部的独立样式,可以在 `<style scoped>` 中设置: ```html <template> <div> <uni-scroll-view> <view :class="{ 'custom-scroll-content': true }" v-bind:class="{ ...additionalClasses }"> <!-- 内容 --> </view> </uni-scroll-view> </div> </template> <script> export default { data() { return { additionalClasses: { // 自定义额外的类名及其样式 customScrollContent: { backgroundColor: '#f0f0f0', fontSize: '16px' } } }; } }; </script> ```
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值