scroll-view踩坑记录

最新推荐文章于 2024-06-28 13:37:04 发布
最新推荐文章于 2024-06-28 13:37:04 发布
阅读量2.4k 收藏
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46256147/article/details/106168903
版权
本文记录了在小程序中实现scroll-view横向滚动所遇到的问题及解决方案。原本希望盒子能手动横向拖动，但设置display: flex并未生效。经过查找资料，发现scroll-view默认为block，scroll-x属性不起作用。解决方法是将scroll-view的white-space设置为nowrap，子元素设为inline-block，从而实现预期效果。
摘要由CSDN通过智能技术生成

要求每个盒子可以手动进行横向拖动，类似bilibili顶部菜单栏，但是在scroll-view设置了scroll-x没有生效，在css中给scroll-view设置了display：flex还是没有生效
第一次编写的代码
WXML

<view> 
  <scroll-view scroll-x class="wrap_box">
    <view class="wrap">
      <view class=
最低0.47元/天 解锁文章
今天写了亿个bug
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序：scroll-view
Continue的博客
05-30 2740
文章目录1. 概述2. 基本使用遇到问题 写在前面 最近在用小程序时多次踩坑scroll-view，决定记录下 1. 概述 scroll-view是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动，但是这其中也有些需要注意的问题。 2. 基本使用 <scroll-view class="historyScrollView" scroll-x enable-flex> <view class="sr
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
Scorllview
06-24 353
scroll view 原理在滚动过程当中,其实是在修改原点坐标当手指触摸后, scroll view会暂时拦截触摸事件,使用一个计时器,假如在计时器到点后,没有发生手指移动事件,那么,scroll view发送tracking events到被点击的subview假如在计时器到点前,发生了移动事件,那么 scroll view 取消tracking自己发生滚动子类可以重载touchesSho
scroll-view 可滚动视图区域组件
最新发布
2301_80735340的博客
06-28 194
当一个盒子里的内容过多，无法全部显示时，使用scroll-view，可以实现区域滑动，手动滑动展示盒子内未显示全的内容。scroll-view的属性过多，这里只介绍最基本的2个：横向滑动与纵向滑动。盒子内默认是纵向排列，想要实现横向滑动，需要做一些设置。接下来设置横向滑动(scroll - x)首先，为View设置样式，把它们设置盒子。
ScrollView的坑
yufumatou的博客
07-05 375
用了那么久的ScrollView今天竟然遇到了一个棘手的坑，以至于我都不敢在使用这个控件了，可是今天突然找到解决方案了。 与坑背景：登录页面多个edittext条目纵向排列，为了兼容多分辨率机型需要在最外层嵌套ScrollView，当短屏显示不全时能够滑动显示。本来很常规的操作，可是意料之外的事情发生了，在4.4系统的oppo测试机上，当点击Edittext条目后弹出软件盘，可是收起软件盘后，被...
视图篇——UIScrollView学习要点
code life
03-16 366
ScrollView原理       视图的滚动过程，其实是在不断修改原点坐标。当手指触摸后，ScrollView会暂时拦截触摸事件，使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么ScrollView发送tracking events到被点击的subView；若是在计时器到点后发生了移动事件，那么ScrollView取消tracking自己促发滚动。 其子类可以重载 t
微信小程序之scroll-view的坑
Iterator_1993的博客
01-30 1万+
好久没动小程序了，今天打算复习复习，结果刚写了一个scroll-view就遇到了一个坑，这怎么能忍，对比看文档也没发现那里出了问题，没办法只能去翻翻微信给的demo,发现scroll-view一个必要属性和两个必要样式，缺其一就无法完成scroll-view。 1.水平滑动的scroll-view 水平滑动的scroll-view,需要给scroll-view一个固定的宽度，设置属性scrol
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll xss=removed> asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj </scroll> 发现scroll-view内的一大...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
在uni-app框架中，`scroll-view`组件是一个非常实用的工具，它允许开发者实现横向和纵向的滚动，并且可以添加滚动回调功能，以便在用户滚动时执行特定的操作。下面将详细讲解uni-app的`scroll-view`组件及其相关的...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
### 微信小程序中scroll-view实现自动滚动及高度自适应 #### 一、问题背景与需求分析 在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够...
微信小程序把玩（九）scroll-view组件
热门推荐
FUCK
09-25 10万+
scroll-view为滚动视图，分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面，比如我的模块主要属性：使用演示：wxml<!--垂直滚动，这里必须设置高度--> <scroll-view scroll-y="true" style="height: 200px"> <view style=
微信小程序_(组件)scroll-view可滚动视图
weixin_30873847的博客
03-30 1092
　　微信小程序scroll-view组件官方文档　　传送门 　　提前准备：使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary <view > <!-- 手指按下后1s样式由a改变为d，手指松开后2s样式由d改变回a --> <...
scroll-view
坚持原创
05-17 5036
我们都知道点击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
TYD0313的博客
10-24 191
scroll-view
ScrollView中的那些坑
程序员
08-12 2445
用过ScrollView的都知道，它除了与ListView 等控件滑动冲突外还有一些坑需要注意： 坑1：有时候你发现用ScrollView包括的控件明明已经大于屏幕大小出界了，可是却不能滑动，这种情况好像是“ScrollView失效了”其实是这样的：出界的那个控件并没有完全出界，还是能看到一点的。这种情况ScrollView会认为，它内部的控件在一个屏幕中可以看完，不需要它出马了。所以你滑动时是
ScrollView
平凡的路
10-20 2242
1.概述1）ScrollView：垂直滚动，ScrollView继承FrameLayout，是一种特殊类型的FrameLayout，因为它可以使用户滚动显示一个内容占据的空间大于物理设备显示的空间的视图列表，即：当拥有很多内容，屏幕显示不完时，需要通过滚动来显示更多内容的视图。 2）HorizontalScrollView：水平滚动 3）滚动的内容是它其中包含的View 4）ScrollView只能
09.scroll-view
天蝎
03-26 414
scroll-view 组件具有提供滚动方式的容器，组件所支持的属性如下： 接下来一个个属性来测试，先创建一个scroll-view <scroll-view class='scroll-view'> <view class='view-item' style='background: green;'>1</view> <view...
03. scroll-view
一文不值的博客
06-08 146
文章目录记第一个小程序DEMO01. scroll-view滚动视图区域（1）关于滚动（2）关于下拉刷新（3）其它属性（4）关于事件02. 滚动区域布局03. 请求数据并渲染 写在前面 本文写了很多官网的API的相关知识点，可略过直接到官网查看 记第一个小程序DEMO 名称：仿网易云音乐小程序 接口：网易云音乐NodeJS版 API 内容：主要实现轮播图、歌单推荐、排行榜、歌单显示、歌曲播放、歌词显示这几部分功能，其它暂未作考虑 本文主要内容：实现首页推荐区域 涉及到滚动视图区域，所
scroll-view记录滚动条位置
06-04
在使用 `scroll-view` 组件时，可以通过监听 `scroll` 事件，获取到当前滚动条的位置，并将其记录下来。具体实现步骤如下： 1. 在 `scroll-view` 组件上绑定 `scroll` 事件，例如： ``` <scroll-view scroll-y="true" bindscroll="onScroll"> ``` 2. 在对应的页面或组件 JS 文件中，定义 `onScroll` 函数，用于监听 `scroll` 事件，例如： ``` onScroll: function(e) { // 获取当前滚动条的位置 const scrollTop = e.detail.scrollTop; // 将滚动条位置记录下来 wx.setStorageSync('scrollPosition', scrollTop); } ``` 3. 在页面或组件 `onLoad` 生命周期中，读取并应用之前记录的滚动条位置，例如： ``` onLoad: function() { // 读取之前记录的滚动条位置 const scrollTop = wx.getStorageSync('scrollPosition') || 0; // 将滚动条位置应用到 scroll-view 组件上 this.setData({ scrollTop }); } ``` 通过以上步骤，就可以实现记录 `scroll-view` 滚动条位置的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值