scoll-view组件中的scoll-x或scoll-y属性失效问题

最新推荐文章于 2023-08-14 20:03:27 发布
最新推荐文章于 2023-08-14 20:03:27 发布
阅读量287 收藏
点赞数
分类专栏： 前端杂谈 文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57625433/article/details/116851793
版权

scoll-view组件中的scoll-x或scoll-y属性失效问题

首先注意scoll-view是小程序特有组件，只在wxml文件中才能使用

scoll-x和scoll-y属性生效的前提是该scoll-view标签有确定宽高，否则无效

若以上情况均已排除

请检查当前元素或父元素是否通过salc函数来设置宽高

若使用salc，请务必保证参数表内运算符左右都留有空格

如下所示：

height: calc( 100vh - 90rpx );

失效原因：

若运算符左右无空格，语句将会产生歧义

从而被解析为：

数值：10

未知单位：vh-90rpx

无确定高度

pilgrimSnail
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scroll-view标签设置了scroll-y属性两屏幕一起滚动
m0_59855881的博客
03-03 285
1.父盒子是否加高度，2.calc方法里面的减号两边一定要加空格。 .cates_container { height: calc(100vh - 90rpx); }
小程序之scroll-view组件
soos的博客
01-20 1万+
scroll-view 可滚动视图区域。有时候我们的一些视图在手机指定的宽度和高度不够存放，那么可以放在 scroll-view 中，以滚动的形式显示被隐藏的内容。 滚动视图分为横向滚动和纵向滚动两种方式，下面我们对视图的滚动进行一一说明。 横向滚动 设置横向滚动（必须满足以下三点）： 1.给scroll-view添加scroll-x="{{true}}"属性（设置为允许横向滚动） 2.给scroll-view添加white-space:nowrap;属性（设置为不换行） 3.给scroll-v
scroll-view
坚持原创
05-17 5017
我们都知道点击tab按钮的时候，可以让scroll-view滑到指定的地方（scroll-into-view）,但是手动滑到某个地方的时候，却不能反过来控制选中对应的tab，这时就只能自定义了 <scroll-view @scroll="scrolling" scroll-y="true" :scroll-with-animation="true" :scroll-into-view="valuescrollto" :style="'height:'+cardscrollheight+'px;.
可滚动视图scroll-view组件
最新发布
qq2844509367的博客
08-14 936
微信小程序是组件进行拼装的项目scroll-view组件是视频展示和图片展示的很好容器。
div中scroll-y
weixin_42588877的博客
12-28 398
scroll-y 指的是在 div 元素中只能垂直滚动的能力。如果你想让 div 元素中的内容可以垂直滚动，你可以在 div 的样式中添加 overflow-y: scroll;。这样就可以在 div 元素中垂直滚动内容了。 例如： div { overflow-y: scroll; } ...
微信小程序scroll-x失效的完美解决方法
12-03
失效的scroll-x 在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动。。。。  然而，在实际开发中，发现并不是这么简单。。。贴上部分wxml和wxss代码…   <!-- 横向滚动商品 --> <scroll class='scroll-box'> <view class='box'> <view class='box-hd'> <image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/i
关于z-index 层级显示 ios端不生效问题。
01-03
构建项目的时候由于 采用的 antd of vue ui库 ，里面没有类似点击唤醒遮罩层的组件 ，所以自己手写vue组件进行引入 ，主要用的是 css3 z-index 属性 ，通过z-index 值不同进行层级展示。（ ps ：之前处理过类似需求 ...
微信小程序 scroll-view 水平滚动实现过程解析
12-30
1. scroll-view水平滚动使用 1. wxml <scroll class=scroll-wrap> <view class=scroll-view-item> <view class=scroll-img-wrap> <image src=../../images/wukecheng@2x.png class=img-responsive> </view> ...
vue-scoll-hide-header:这是一个小的vue组件，您可以将其固定在固定的标头上，然后在scoll上标头会隐藏
05-18
Vue（滚动隐藏）页眉这是一个小的“无渲染” Vue组件，可在滚动条上隐藏标题。如何原始脚本 < body >< scroll> < header> < nav> ... </ nav> </ header> </ scroll>< main> ...</ main></ body >
isolated-scroll:防止scoll事件冒泡到父元素
05-17
隔离滚动 防止滚动事件冒泡到父元素— 。 $ npm install --save isolated-scroll 用法 const isolatedScroll = require ( 'isolated-scroll' ) ; // Isolate scrolling of selected element: ...
jQuery实现锚点scoll效果实例分析
10-24
主要介绍了jQuery实现锚点scoll效果,实例分析了锚点scoll效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
scrollY、clientY
YingDaoMonkey的博客
04-28 2616
scrollY:是指的滚出屏幕的垂直距离&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * {
【Elasticsearch】Elasticsearch 基于scoll技术滚动搜索大量数据
九师兄
10-04 260
如果一次性要查出来比如10万条数据，那么性能会很差，此时一般会采取用scoll滚动查询，一批一批的查，直到所有数据都查询完处理完 使用scoll滚动搜索，可以先搜索一批数据，然后下次再搜索一批数据，以此类推，直到搜索出全部的数据来 scoll搜索会在第一次搜索的时候，保存一个当时的视图快照，之后只会基于该旧的视图快照提供数据搜索，如果这个期间数据变更，是不会让用户看到的 采用基于_doc进行排序的方式，性能较高 每次发送scroll请求，我们还需要指定一个scoll参数，指定一个时间窗口，每次搜索请求只要.
微信小程序 scroll-view组件的基本使用
贼厉害
02-04 3746
我们可以看到他占满了整个大盒子肯定不行，我们得给他一个宽和高， 宽给他和方块一样大小的100px，高我们给他一个220px，为什么是220px 因为每个方块是100px 高加起来就是300px，为了让他能实现滑动效果，肯定不能给他等于大于他的现有高，应该小于都行对吧。其实我们还有2个参数没有给他们，此时大家可以想的到既然有纵向滑动自然有横向滑动对吧，其实原理是一样的，这两个参数就是。此时我们的方块因为上节课修改了布局变成了横向布局，我们需要修改回来纵向布局，所以我们需要删除我们上一节课的布局代码。
uniapp scroll-view基础用法
热门推荐
lxgyydsgod的博客
08-07 2万+
在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求。本篇主要介绍了一些scroll-view的基础用法
微信小程序使用scroll-view 标签实现内容上下或左右滑动
湾流~ 的博客
09-05 5721
scroll-view标签微信官方介绍 scroll-view标签属性 : scroll-x 为x轴(左右滑动),scroll-y为y轴(上下滑动) 左右滑动 scroll-view标签需要设置white-space: nowrap;里面的元素要设置为行内块元素 html <scroll-view scroll-x > <view class="templateitem" v-for="(item,index) in xxx" style=" width: 200px; heig
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 7791
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
微信小程序中scroll-view无法上下滑动,less的calc函数
a1638185626的博客
03-24 1884
在左侧菜单栏中需要实现上下滚动的效果 在写样式的时候使用到less .cates_container { // less中使用calc的时候要注意 height: ~'calc(100vh-90rpx)'; display: flex; .left_menu { //子项 高度 100% f...
微信小程序 scroll-view隐藏滚动条,scroll-y方向
hjiaqing的博客
03-12 2185
微信小程序 scroll-view隐藏滚动条，在scroll-x="true"情况下是可以使用一下面方法 ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } 但在scroll-y="true"时，要再加上display:none ::-webkit-scrollbar{ width: 0; height: 0;...
我不用scoll-view组件，我用的view组件
06-10
在view组件中设置高度为auto，overflow-y为auto即可实现高度自适应和滚动条的显示。然后在其中放置需要分页加载的内容，通过监听scroll事件，判断用户滑动到底部时，触发上滑加载更多的事件，从而实现分页加载。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值