scroll-view

uniapp scroll-view横向滚动不起效、纵向滚动自适应高度

1.scroll-view纵向滚动自适应高度使用竖向滚动时，需要给一个固定高度，通过css设置height；如果不想写死、不想通过js计算，希望灵活获取高度应该怎么做呢，用css即可示例：//外层内容1内容2滚动区域即可；后面在真机测试下纵向滚动还遇到问题，切换到不同tab时，滚动条不复位，依然保持在上一次的滚动位置；增加:scroll-top=“scrollTop”，在切换tab时把scroll

赫卡夹·2025-06-21 20:56

uniapp实现锚点定位并增加动画及相关问题处理

一、通过scroll-view组件自带的scroll-into-view属性处理如下代码中，toview是目标元素的id，即循环数据中的item.id，items的数据结构是：[{name:"课程1",

暖汐汐·2025-06-09 10:47

前端（小程序）学习笔记（CLASS 1）：组件

表单组件，*导航组件媒体组件，map地图组件，canvas画布组件，开放能力，无障碍访问2、常用的视图容器类组件1、view普通视图区域类似于HTML中的div，是一个块级元素常用来实现页面的布局效果2、scroll-view

肥肠可耐的西西公主·2025-05-24 13:37

微信小程序开发中，下拉刷新列表页面怎么写？

在微信小程序中实现下拉刷新列表页面，可以通过全局下拉刷新配置或自定义scroll-view组件两种方式实现。

ljbaofu_CSDN·2025-05-23 02:33

uniapp(H5) scroll-view不显示滚动条

//滚动条样式/deep/::-webkit-scrollbar{/*滚动条整体样式*/width:4px!important;height:3px!important;overflow:auto!important;background:#ccc!important;-webkit-appearance:auto!important;display:block;}/deep/::-webkit-

skx1007883564·2025-05-22 04:11

kbone 高级 - 使用小程序内置组件（一）_kbone引入公用css文件

web-view组件内置组件的子组件会被包裹在一层自定义组件里面，因此内置组件和子组件之间会隔着一层容器，该容器会追加h5-virtual到class上（除了view、cover-view、text、scroll-view

2501_90213331·2025-05-14 22:18

微信小程序自定义组件标签管理

3.8.1概述基础功能标签增删改查：支持添加/删除单个标签、批量删除、重置默认标签数据展示：通过对话框展示结构化数据并支持复制动画系统：添加/删除时带缩放淡入淡出动画结构分析（WXML）数据展示优化使用scroll-view

奇妙方程式·2025-05-07 01:26

Uniapp：scroll-view(区域滑动视图)

目录一、基本概述二、属性说明三、基本使用3.1纵向滚动3.2横向滚动一、基本概述scroll-view，可滚动视图区域。用于区域滚动。

Monly21·2025-04-23 08:04

Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发

一、未正确设置容器高度问题描述scroll-view未设置明确高度或高度值无效，导致无法形成有效滚动区域。

堕落年代·2025-03-15 10:04

前端 - uniapp - - 滚动容器scroll-view实现横向滚动

微信开放平台scrol-view的官方文档说明https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.htmlscrollview相当于给div加上了overflow-x:auto;属性想要实现横线滚动官方文档有说明需要配置scroll-x和enable-flex为true并其需要给高度和flex-directi

cv高级工程师YKY·2025-03-13 03:47

uni-app实现用接口编写新闻

二、uni-app官网上（官网）有各种可以学习组件包括内置组件、常用的有：视图容器组件里的，view,scroll-view,swiper等，还有表单组件，如button、f

2021级计算机应用技术1班-童秀萍·2025-03-04 09:23

小程序侧边导航栏左右联动

1.点击左边导航栏,右边内容滚动到指定区域用scroll-view组件中的scroll-into-view来解决{{item.name}}{{item.name}}{{items.name}}data(

ShinyRuo_·2025-02-27 20:17

微信小程序scroll-view组件设置 scroll-top无效问题解决

微信小程序官方提供了一个可以设置滚动条位置的方法scroll-top在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里演示一个切换选项重置滚动条事件的案例：data:{//data内不需要设置scrollTop},//

·2025-02-02 03:59

微信小程序使用上拉加载onReachBottom。页面拖不动。一直无法触发上拉的事件。

1，可能是原因是你使用了scroll-view的标签，用onReachBottom触发加载事件。这两个是有冲突的。没办法一起使用。

肖肖肖丽珠·2025-01-23 13:03

uni-app无法触发onReachBottom触底事件的解决方案

但页面滚动到底部时，无法触发onReachBottom函数过程：排除了下文提到的（pages.json未配置，以及容器未设置高度）等问题后，也更换了方式，使用scroll-view标签进行包裹，发现仍无法解决原因

沐雨MUYU_·2025-01-22 02:28

微信小程序仿微信聊天界面

界面结构:消息列表:使用scroll-view实现滚动，每条消息使用view组件包裹，根据消息类型(文本、图片、文件)显示不同内容。

微特尔普拉斯·2024-09-14 10:35

uniapp scroll-view滚动触底加载 height高度自适应

背景：scroll-view组件是使用，官网说必须给一个高度height，否则无法滚动，所以刚开始设置了设置了一个高度，想着vh应该挺合适的；后来在不同手机应用中，发现不同手机，滚动触底加载的动态效果显示不出来

影子信息·2024-09-04 02:46

微信小程序的常用组件

目录一、常用的视图容器类组件①view②scroll-view③swiper和swiper-item二、常用的基础内容组件①text②rich-text三、其它常用组件①button②image③navigator

一指流沙q·2024-02-20 13:11

position: sticky 防坑指南

在使用scroll-view，计算scrollTop的值，当scrollTop大于190时，添加样式position：fixed，但是这个方法在真机测试的时候有会性能问题，造成页面卡顿，

fuheideMayuyu·2024-02-11 13:05

微信小程序scroll-view滚动scrollTop不准确

小程序里使用scroll-viewbindscroll="scroll"内的scroll方法可检测滚动距离scroll(e){console.log('滚动距离：'+e.dateil.scrollTop)}但是在快读滚动的过程中明明已经滚动到顶部了scrollTop竟然还在300。缓慢滑动虽然没有问题，但是在快速滚动的时候scrollTop会出现非常大的误差。以下是解决方法1.这是因为每次滚动监听

woshiabc111·2024-02-08 21:17

微信小程序的视图容器——简易实现纵向滚动scroll-view

代码东京超市1东京超市2东京超市3东京超市4东京超市5东京超市6东京超市7东京超市8东京超市9东京超市10东京超市11东京超市12以下是.wxss代码/*pages/scroll/scroll.wxss*/scroll-view

搞毕设中╯﹏╰·2024-02-08 20:17

微信小程序swiper+scroll-view实现滑动切换内容

scroll-view：包裹整个页面，设置scroll-x或scroll-y，改变滚动的方向。3.实现代码{{item.name}}tab{

苏苏哇哈哈·2024-02-06 00:31

2024/2/3学习记录

scroll-view可滚动的视图区域，常用来实现滚动列表效果swiper和swiper-item常用swiper组件的常用属性轮播图容器组件和轮播图item组件基础组件text文本组件，类似于html

lxh0113·2024-02-04 13:49

uniapp如何监听页⾯滚动

例如，你可以在scroll-view组件上设置@scroll属性，然后在methods中定义scroll方法来接收滚动事件。在这个方法中，你可以获取到滚动的距离或者滚动的位置，并进行相应的处理。

emma20080101·2024-02-04 09:38

微信小程序页面指定区域局部滚动、下拉刷新和触底加载

一个页面其中一块区域要求实现滚动和下拉刷新和触底加载在红色区域内上下滚动，下拉刷新和触底加载分析：1、页面包括四个区块（盒子）：搜索、按钮、Tab按钮、数据展示区，仅需要数据展示区滚动，在上拉时刷新，触底时加载数据设计：1、数据展示区内使用scroll-view

四十年陈·2024-02-03 09:26

uniapp 问题汇总-问题数(2)

iosscroll-view无法滚动使用uview折叠面板嵌套scroll-view嵌套之后安卓可以滚动，ios无法滚动去使用原因是动态设置scroll-view高度的时候将高度错误错误代码:style

前端专业写bug·2024-02-01 06:29

微信小程序 view的文本自动换行了的问题（scroll-view）/微信小程序 view换行跟不换行的解决方案

今天在写一个滚动导航栏的时候发现view的文本自动换行了，用了display：flex;flex-warp:nowarp;也不管用，wxml:{{item}}wxss:.top{width:100%;height:100rpx;background-color:#F6F5F6;display:flex;}.date{height:100rpx;width:80rpx;margin:0rpx20rp

Averyvery·2024-01-31 18:44

智能小程序组件汇总（全）

小程序官方DemoDemo下载地址使用智能生活App扫码进行体验组件列表视图容器名称功能说明view视图容器scroll-view可滚动视图区域swiper滑块视图容器swiper-item仅可放置在swiper

IoT砖家涂拉拉·2024-01-29 16:01

uni-app隐藏scroll-view的滚动条

/*隐藏滚动条*/::-webkit-scrollbar{display:none;width:0!important;height:0!important;-webkit-appearance:none;background:transparent;}

Maoyy·2024-01-27 08:59

《微信小程序开发从入门到实战》学习九十二

enable-back-to-top设置为true，用户单击标题栏可以让scroll-view中的内容快速地回到最顶部。iOS单击标题栏即可，Android需要双击标题栏。

那长长遥远的路·2024-01-26 13:24

微信小程序scroll-view组件使用scroll滑动事件中的scrollTop有时不为0的问题

问题：scroll-view的scroll滑动事件，经常会有这样的问题：scroll-view滑动到顶部后，最后的事件中的scrollTop不为0、toupper事件也没有收到等原因：scroll-view

打响第一枪·2024-01-26 01:34

微信小程序开发scroll-into-view不生效解决方案

解决方案：检查scroll-view是否设置高度，scroll-y是否设置为true；检查id是否为数字开头，可以试下在数字前加字母或字符。更多微信小程序内容欢迎关注。内容有用欢迎赞赏。

句号（在IT行业摸爬滚打）·2024-01-25 16:10

微信小程序开发scroll-view在预览或真机调试仅显示第一个元素解决方案

现象如下：在编译时显示正常：在预览或真机调试时仅显示第一个元素：解决方案：将app.json文件中renderer类型由skyline改为webview更多微信小程序内容欢迎关注我！有帮助的话欢迎打赏！

句号（在IT行业摸爬滚打）·2024-01-25 16:09

uniapp开发过程一些小坑

问题1、uniapp使用scroll-view的:scroll-into-view=“lastChatData“跳到某个元素id时候，在app上不生效，小程序没问题使用this.

是小师叔啊·2024-01-25 15:15

uniapp scroll-view 点击左右方向按键自动滚动到设置位置

//左按钮//右按钮slideLeft(event){this.scrollLeft=event.detail.x-100;},slideRight(event){this.scrollLeft=event.detail.x+100;//获取点击位置的x坐标//setTimeout(()=>{//this.$refs.scrollView.scrollLeft=this.targetX;//根据点

php技师·2024-01-25 06:40

uniapp scroll-view用法[下拉刷新,触底事件等等...](4)

前言:可滚动视图区域。用于区域滚动话不多说直接上官网属性官网示例讲一下常用的几个@scroll滚动时触发@scrolltoupper滚动到顶部或左边，会触发scrolltoupper事件@scrolltolower滚动到底部或右边，会触发scrolltolower事件1.纵向滚动设置scroll-y="true"开启纵向滚动功能ABC2.横向滚动设置scroll-x="true"开启横向滚动功能A

CV工程师!!·2024-01-25 06:39

小程序使用scroll-view组件视频固定顶部

这里我们不用fixed属性，而是把页面分为两部分，上部分为视频，下部分为滚动区域，滚动区域用scroll-view包裹，给scroll-view组件设置固定高度，并在在页面的json文件中设置禁止页面滚动就可以啦

QeyserMutellip·2024-01-25 03:10

《微信小程序开发从入门到实战》学习九十一

7.1视图容器组件7.1.2scroll-view组件scroll-view组件时是滚动的视图容器，可在竖直方向或水平方向上滚动，展示超出屏幕高度或宽度的内容。

那长长遥远的路·2024-01-24 11:14

进阶——下拉重新加载和上拉加载更多的功能实现

WeChat小程序交流（QQ群：769977169）下拉重新加载和上拉加载更多的功能实现，主要体现在scroll-view组件的数据处理中。

番薯大佬·2024-01-21 21:31

uniapp：scroll-view触底加载、下拉刷新、返回顶部

1.swiper禁止滑动//禁止swiper滑动stopTouchMove(){returnfalse},2.scroll-view触底加载uniapp-scrollView顺便解决了ios下拉，顶部和底部有白屏的问题{"path":"pages/index/index","style":{"enablePullDownRefresh":false,"disableScroll":true//pa

FIRE·2024-01-20 06:52

微信小程序之组件和API

一个人摸索学习很难坚持，想组团高效学习…想写博客但无从下手，急需写作干货注入能量…热爱写作，愿意让自己成为更好的人…文章目录前言一、组件1、小程序中组件的分类2、常用的视图容器类组件3、view组件的基本使用4、scroll-view

哥的时代·2024-01-20 00:43

uniapp横向滚动（scroll-view）

属性名类型默认值说明平台差异说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时（单位px），触发scrolltoupper事件lower-thresholdNumber50距底部/右边多远时（单位px），触发scrolltolower事件scroll-topNumber设置竖向

babyxuqian·2024-01-19 13:36

uniapp开发小程序—scroll-view实现内容滚动时，标题也滚动

一、需求scroll-view实现内容滚动时，标题也滚动二、效果三、代码实现头部固定区域{{item.id}}左边是第{{index+1}}个右边是第{{index2+1}}个exportdefault

小跳不会Coding·2024-01-19 13:06

于小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题

1scroll-view中的包裹需要滑动的元素的大盒子用display:flex;是没有作用的；2scroll-view中的需要滑动的元素要用dislay:inline-block;进行元素的横向编排；3包裹scroll-view

小李不小·2024-01-19 12:38

微信小程序安卓系统下Input输入内容上移错位问题的解决办法

在较长的表单中，页面可能需要滑动，在这种情况下，在苹果手机上使用Input显示正常，但是在安卓手机上就会出现输入内容上移错位的问题,严重影响使用需要设置一个状态控制scroll-view是否允许滑动，当

A_ugust__·2024-01-19 06:19

小程序踩坑第二谈

如何在scroll-view中触发该条件首先upper事件和lower事件是在scroll-view中使用，可以用在上拉自动加载和下拉刷新；或者单独的下拉刷新也可以，即onPullDownRefresh

Jiwenjie·2024-01-18 22:40

uni-app的组件（一）

scroll-view可滚动视图区域。

猿究院陈安·2024-01-18 09:42

uniapp 自定义scroll-view滚动条

茅台exportdefault{data(){return{selectList:20,activeIndex:-1,scrollLeft:0}},methods:{selectClick(index){this.activeIndex=this.activeIndex==index?-1:index},scrollClick(e){this.scrollLeft=e.detail.scrollL

走，带你去玩·2024-01-16 11:11

uni-app scroll-view横向、纵向基本使用

官网介绍：可滚动视图区域。用于区域滚动属性说明：注意：使用竖向滚动时，需要给一个固定高度，通过css设置height；使用横向滚动时，需要给添加white-space:nowrap;样式一、纵向二、横向

yyxhzdm·2024-01-14 08:21

scroll-view在小程序页面里实现滚动，uniapp项目

要实现红框中的区域进行滚动,scroll-view必须写高{{item.title}}3333333333333333333333545555555533435455555555334354555555553343545555555533435455555555334354555555553343545555555533435455555555334354555555553343545555555

深一海·2024-01-14 06:52

推荐频道