微信小程序组件scroll-view可滚动视图区域

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 微信小程序 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50564041/article/details/109153884
版权
本文介绍了微信小程序中scroll-view组件的使用，强调了在设置竖向滚动时需要指定固定高度，并讨论了与textarea、map等组件的兼容性问题，以及scroll-into-view和scroll-top的优先级。同时，提到了在scroll-view中无法触发onPullDownRefresh事件，建议使用页面滚动进行下拉刷新，并可通过WXS实现自定义下拉刷新动画。
摘要由CSDN通过智能技术生成

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

1、属性：scroll-x 类型：boolean
默认值：false 允许横向滚动
2、属性：scroll-y 类型：boolean
– –
默认值：false 允许纵向滚动
3、show-scrollbar 类型：boolean
– –
true 滚动条显隐控制 (同时开启 enhanced 属性后生效)
4、refresher-enabled 类型：boolean
– –
false 开启自定义下拉刷新

Bug & Tip
tip: 基础库 2.4.0以下不支持嵌套textarea、map、

最低0.47元/天 解锁文章
顾智道
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序使用scroll-view实现视图滚动
improvement
11-16 1682
微信小程序使用scroll-view实现视图滚动 1、设置横向滚动 给scroll-view添加scroll-x="true"属性。 给scroll-view添加white-space:nowrap;样式。 给scroll-view中的子元素设置为display:inline-block;。 示例代码如下： wxml代码： <scroll-view class='scroll-x-view' scroll-x='true'> <view class='scroll-view-ite
微信小程序开发学习笔记——2.4scroll-view可滚动视图区域组件
Qy_cm的博客
02-08 412
>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。.row*3回车（3可改成任意整数）.row{$}*3回车。
scroll-view 可滚动视图区域组件
2301_80735340的博客
06-28 169
当一个盒子里的内容过多，无法全部显示时，使用scroll-view，可以实现区域滑动，手动滑动展示盒子内未显示全的内容。scroll-view的属性过多，这里只介绍最基本的2个：横向滑动与纵向滑动。盒子内默认是纵向排列，想要实现横向滑动，需要做一些设置。接下来设置横向滑动(scroll - x)首先，为View设置样式，把它们设置盒子。
微信小程序scroll-view组件可滚动视图区域
JackieDYH的博客
07-09 1630
scroll-view 可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 属性 类型 默认值 必填 说明 最低版本 scroll-x boolean false 否 允许横向滚动 1.0.0 scroll-y boolean false 否 允许纵向滚动 1.0.0 .
微信小程序开发 scroll-view实现横向纵向滚动
m0_65027074的博客
10-20 3497
微信小程序开发 scroll-view实现横向纵向滚动
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
Ares5k
05-07 3671
微信小程序、swiper 轮播图、scroll-view 可滚动视图区域
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 5292
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
微信小程序之scroll-view
weixin_46901555的博客
09-12 3242
文章目录前言一、pandas是什么？前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结二、使用步骤1.引入库2.读入数据总结欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 .
微信小程序scroll-view滚动视图隐藏横向滚动条
CSDNYXJY的博客
09-09 5581
scroll-view滚动视图scroll-view作用滚动条效果如何隐藏滚动条以下是解决方法的技术说明 scroll-view作用 可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px 链接: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html. 滚动条效果 scroll-view写好之后页面效果如下图，会产生一个滚动条
微信小程序开发（七） scroll-view 组件
竹毛言己
04-11 1908
微信小程序scroll-view组件
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
微信小程序 scroll-view的使用案例代码详解
10-15
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` 的使用方法，并通过具体的代码案例进行解析...
微信小程序 scroll-view隐藏滚动条详解
08-31
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它主要用于实现页面内的滚动效果。本篇将详细讲解如何在微信小程序的 `scroll-view` 中隐藏滚动条以及与页面跳转相关的技巧。 首先，我们要了解如何隐藏 ...
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
首先，`scroll-view`是微信小程序提供的一个可滚动视图容器，它支持水平滚动和垂直滚动。通过设置`scroll-x`或`scroll-y`属性，我们可以指定滚动方向。同时，通过`scroll-top`和`scroll-left`可以设置滚动位置。 ...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 796
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 581
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 987
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
微信小程序手动scroll-view的滚动
08-16
微信小程序的scroll-view组件是用于实现可滚动视图区域的功能。要实现手动滚动，可以使用scroll-into-view属性和scrollTop属性。 首先，在scroll-view组件上设置一个唯一的id，例如id="scroll-view"，作为滚动视图的标识。 然后，在需要手动滚动到的某个位置设置一个唯一的id，例如id="target"。 接下来，在页面的js文件中，通过调用wx.createSelectorQuery().select('#target').boundingClientRect()方法获取目标元素的位置信息。 然后，将获取到的位置信息中的top属性赋值给scrollTop属性，以实现手动滚动到目标位置。 具体代码如下： 在wxml文件中： ``` <scroll-view id="scroll-view" scroll-y="true"> <!-- 内容 --> <view id="target">目标位置</view> <!-- 内容 --> </scroll-view> ``` 在js文件中： ``` Page({ // 其他代码 scrollIntoView() { wx.createSelectorQuery().select('#target').boundingClientRect((res) => { if (res) { wx.pageScrollTo({ scrollTop: res.top }) } }).exec() }, // 其他代码 }) ``` 通过调用scrollIntoView方法可以手动滚动到目标位置。 需要注意的是，scroll-into-view属性和scrollTop属性也可以直接在wxml中设置，实现页面加载时自动滚动到指定位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值