微信小程序：scroll-view

最新推荐文章于 2024-06-28 13:37:04 发布
最新推荐文章于 2024-06-28 13:37:04 发布
阅读量2.7k 收藏 5
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43522998/article/details/117402215
版权
本文介绍了微信小程序中scroll-view组件的基本使用和常见问题。在使用scroll-view实现滑动效果时，需要注意设置scroll-x或scroll-y属性，并确保给scroll-view指定合适的宽度或高度。此外，为防止显示不全或空白，需要设置white-space: nowrap。对于align-items:center不居中问题，可以通过让子元素撑满scroll-view并对其内部内容进行垂直居中解决。
摘要由CSDN通过智能技术生成

文章目录

写在前面
最近在用小程序时多次踩坑scroll-view，决定记录下

1. 概述

scroll-view是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动，但是这其中也有些需要注意的问题。

2. 基本使用

  <scroll-view class="historyScrollView" scroll-x enable-flex>
      <view class="srollItem">
        <view
最低0.47元/天 解锁文章
Continue丶
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序之scroll-view
Hedong的博客
01-23 1万+
scroll-view 可滚动视图区域。 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。 实例代码如下：<view class="section"> <view class="section__title">垂直滑动</view> <scroll-view scroll-y="true" bindscrolltolower="lower" bindscrol
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 6052
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
scroll-view 可滚动视图区域组件
最新发布
2301_80735340的博客
06-28 241
当一个盒子里的内容过多，无法全部显示时，使用scroll-view，可以实现区域滑动，手动滑动展示盒子内未显示全的内容。scroll-view的属性过多，这里只介绍最基本的2个：横向滑动与纵向滑动。盒子内默认是纵向排列，想要实现横向滑动，需要做一些设置。接下来设置横向滑动(scroll - x)首先，为View设置样式，把它们设置盒子。
微信小程序scroll-view底部内容无法完全显示
weixin_45932157的博客
04-12 1626
在底边加个占位 <view style="height:20px"></view>
微信小程序scroll-view组件
2301_76669854的博客
04-16 1168
当一个容器内容很多时，若容器无法显示完整内容，则可通过滚动操作查看所有内容 在微信小程序中scroll-view组件可以实现滚动效果
scroll-view
坚持原创
05-17 5045
我们都知道点击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滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
### 微信小程序中scroll-view实现自动滚动及高度自适应 #### 一、问题背景与需求分析 在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够...
详解微信小程序之scroll-view的flex布局问题
10-17
本文将探讨在微信小程序中使用scroll-view组件时，如何解决flex布局带来的问题。 首先，scroll-view是微信小程序提供的一个视图区域，它可以实现内容的滚动。这对于创建可滚动的列表或者卡片非常有用，尤其是在处理...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
Scorllview
06-24 359
scroll view 原理在滚动过程当中,其实是在修改原点坐标当手指触摸后, scroll view会暂时拦截触摸事件,使用一个计时器,假如在计时器到点后,没有发生手指移动事件,那么,scroll view发送tracking events到被点击的subview假如在计时器到点前,发生了移动事件,那么 scroll view 取消tracking自己发生滚动子类可以重载touchesSho
视图篇——UIScrollView学习要点
code life
03-16 369
ScrollView原理       视图的滚动过程，其实是在不断修改原点坐标。当手指触摸后，ScrollView会暂时拦截触摸事件，使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么ScrollView发送tracking events到被点击的subView；若是在计时器到点后发生了移动事件，那么ScrollView取消tracking自己促发滚动。 其子类可以重载 t
微信小程序 scroll-view
weixin_59727199的博客
09-15 7836
微信小程序 scroll-view
微信小程序开发 scroll-view
weixin_39725702的博客
05-21 303
问题：微信小程序中使用scroll-view滚动页面效果，设置触底滚动无效 **解决：**必须给scroll-view组件设置height
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值