scroll-view使用

最新推荐文章于 2024-08-23 10:43:07 发布
最新推荐文章于 2024-08-23 10:43:07 发布
阅读量6.6k 收藏 13
点赞数 4
分类专栏： 使用技巧 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffan1/article/details/106740658
版权
本文介绍了在小程序中使用scroll-view组件实现横向滚动时遇到的问题及解决方案。通过设置scroll-x属性，white-space样式以及调整CSS结构，成功实现横向滚动。讨论了使用">"选择器可能造成的影响，并欢迎读者解答为何如此。
摘要由CSDN通过智能技术生成

小程序官方组件scroll-view使用

横向滚动

在 scroll-view 横向滚动的时候遇到了一点麻烦，就是不管怎么设置scroll-view，但是scroll-view横向滚动就是不生效，看了很多教程，基本围绕着三个点来说。

  • 1、设置组件属性scroll-x，直接写上scroll-x或者scroll-x="true"都可以。
  • 2、设置组件css ：white-space: nowrap;
  • 3、设置组件宽度
    其他的更是五花八门
    但是我逐个试了，有的有效，更多的是无效的。

于是我是用成功案例，逐个排查原因，发现是我的css样式问题。具体是什么原因呢？

wxml文件

以下是我的一个wxml结构


<view class="m-tab">
  <scroll-view class="scroll" scroll-x
最低0.47元/天 解锁文章
he_feifan
关注
专栏目录
小程序学习之路四：scroll-view的使用
lovelixue的博客
06-30 587
感言：18年11月开始了学习之路一，结果写到了才开始学习就停滞了半年，这可不行，毅力是IT界的基础，延续一年半前继续开始 上一篇我们讲到了入门学习，接下来来讲讲scroll-view的使用，我作为一名新手，更多的作用是记录自己学习过程中遇到的问题，无法深入讲解，请多多包含，如有错误的位置，也希望大家能帮我解答，感谢，同时也希望能帮助到一些新手。 直接先上代码 <scroll-view class="demolist" scroll-y='true'> <view wx:for='
scroll-view的使用
weixin_44773735的博客
03-14 1545
1.图片的横向滚动 功能描述：添加图片，展示缩小的图片，点击可以放大，图片可以横向滑动显示，图片可以删除 /main.wxml &amp;lt;!-- 照片展示区域 --&amp;gt; &amp;lt;view class=&quot;ipt pic_ipt&quot;&amp;gt; &amp;lt;view class=&quot;pho_box&quot;&amp;gt;
微信小程序开发，scroll-view实现商品列表水平/横向滑动
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-23 1272
使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。在上面.wxml布局中，商品列表是通过view堆积起来的，在实际开发中，肯定也不能这样写死，列表数据应该是一个动态的。在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。官方说只有在竖向滚动时，需要给scroll-view一个固定高度，但在实际开发过程中，解决方案：在scroll-view标签中添加。
Scroll-view的用法（网页和微信小程序）
laowang357的博客
12-17 2565
4. 当scroll-view的子元素尺寸超过scroll-view的尺寸时，需要设置scroll-view的属性scroll-with-animation来开启滚动动画。当属性值为scroll时，表示开启滚动；3. 设置scroll-view的样式和滚动条的样式，可以通过设置属性来控制，如scroll-view的class属性和scroll-bar的class属性。2. 设置scroll-view的高度和宽度，以及滚动方向，可以通过设置属性来控制，如scroll-x和scroll-y。
UIScrollView用法
kanwoerzi
08-26 246
UIScrollView是iphone中的一个重要的视图，它提供了一个方法，让你在一个界面中看到所有的内容，从而不必担心因为屏幕的大小有限，必须翻到下一页进行阅览。确实对于用户来说是一个很好的体验。但是又是如何把所有的内容都加入到scrollview，是简单的addsubView。假如是这样，岂不是scrollView界面上要放置很多的图形，图片。移动设备的显示设备肯定不如PC，怎么可能放得下...
scroll-view使用示例及注意事项
coderheart的博客
01-12 1728
scroll-view
微信小程序 scroll-view的使用案例代码详解
10-15
【微信小程序 `scroll-view` 的使用详解】 在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` ...
微信小程序scroll-view组件实现滚动动画
08-28
在本文中，我们将详细介绍如何使用 scroll-view 组件实现滚动动画，并提供了一个完整的示例代码。 知识点1：scroll-view 组件的基本使用 scroll-view 组件是微信小程序中的一种常用的滚动容器组件，可以用来实现...
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
3. **引入组件**：在uni-app项目中，使用`scroll-view`组件非常简单，只需在页面的`.vue`文件中通过`<template>`标签引入，然后在`<script>`部分注册组件，例如： ```html <view> <scroll-view :scroll-x="true...
微信小程序scroll-view点击项自动居中效果的实现
10-15
在`onReady`生命周期函数中，使用`wx.createSelectorQuery()`创建选择器查询对象，选择`.scroll-view`元素并获取其边界信息。然后将得到的宽度存储在数据对象中。 ```javascript onReady() { wx....
微信小程序开发系列（十二）·屏幕滚动scroll-view 组件的使用
热门推荐
时光の尘的博客
03-02 1万+
网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。① scroll-x： 允许横向滚动。② scroll-y： 允许纵向滚动。框住部分能够上下滚动。
微信小程序开发之scroll-view的用法
JY185445的博客
04-13 2005
微信小程序中的 最终效果图： 设计思路： 1.了解scroll-view scroll-view组件可以实现左滑与上下滑动的效果 scroll-x=“true"开启水平滑动， scroll-y=“true"开启垂直滑动 2.了解swiper组件 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。所以要实现点击切换效果需要使用到它。 使用格式： 添加要循环的内容 3....
Scroll View的简单操作
weixin_41798071的博客
09-10 1313
控件Scroll View由4部分组成， 1.含有Scroll Rect组件的根节点：Scroll View 2.含有Mask组件的节点：Viewport 3.所有内容的父节点Content，常含有布局控件 4.滚动条，包括横向和纵向 Scroll View可用于制作歌曲的下拉列表,即在 UI 中显示的可以滑动的视图 ,或者其它,你可以充分发挥自己的主观能动性哦 首先, 你可以通过 Hier...
小程序scroll-view 组件的使用
weixin_47938715的博客
03-19 2889
小程序scroll-view 组件的使用
ScrollView的使用
weixin_34167819的博客
01-14 93
UIScrollView：UIScrollView是一个滑动视图，可以通过滑动手势放或所缩小显示内容，包含两个子类： UITableView和UICollectionView 1. UIScrollView 简介...
Scorllview
06-24 368
scroll view 原理在滚动过程当中,其实是在修改原点坐标当手指触摸后, scroll view会暂时拦截触摸事件,使用一个计时器,假如在计时器到点后,没有发生手指移动事件,那么,scroll view发送tracking events到被点击的subview假如在计时器到点前,发生了移动事件,那么 scroll view 取消tracking自己发生滚动子类可以重载touchesSho
视图篇——UIScrollView学习要点
code life
03-16 377
ScrollView原理       视图的滚动过程，其实是在不断修改原点坐标。当手指触摸后，ScrollView会暂时拦截触摸事件，使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么ScrollView发送tracking events到被点击的subView；若是在计时器到点后发生了移动事件，那么ScrollView取消tracking自己促发滚动。 其子类可以重载 t
scroll-view scroll-y
09-04
scroll-view组件中的属性scroll-y是用来开启纵向滚动功能的。当将scroll-y设定为true时，scroll-view组件就可以在纵向上滚动。要开启纵向滚动功能，需要给scroll-view设置一个高度，并且内容的高度要大于scroll-view的高度才能体现出滚动功能。如果内容的高度小于scroll-view的高度，就无法滚动。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [uniapp scroll-view基础用法](https://blog.csdn.net/lxgyydsgod/article/details/126212359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值