微信小程序的视图容器-- scroll-view

最新推荐文章于 2024-08-14 09:00:32 发布
最新推荐文章于 2024-08-14 09:00:32 发布
阅读量1.1k 收藏
点赞数
文章标签： 博为峰 微信小程序 视图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwf_erg/article/details/72156262
版权
本文介绍了微信小程序中scroll-view组件的使用，包括在.wxml文件中的配置，如设置scroll-y属性为true允许纵向滚动，以及bindscrolltoupper事件监听滚动到顶部。在.wxss文件中，通过设置固定高度实现竖直滚动效果。每个view有不同的背景颜色，当滚动到顶部时，js文件中的changeP方法会被触发并在控制台打印信息。
摘要由CSDN通过智能技术生成

scroll-view:可滚动视图区域

 

属性名

类型

默认值

说明

scroll-x

Boolean

false

允许横向滚动

scroll-y

Boolean

false

允许纵向滚动

upper-threshold

Number

50
最低0.47元/天 解锁文章
bwf_erg
关注
微信小程序scroll-view的scroll-into-view无效问题解决办法
weixin_55109596的博客
02-14 8624
轻松解决微信小程序scroll-view的scroll-into-view无效问题
微信小程序 scrollview 滚动到指定位置
天问博客-专注于大前端技术
11-29 8609
在微信小程序中，实现 ScrollView 滚动到指定位置有多种方法，下面将介绍三种主要的实现方式。
微信小程序中实现自动滚动
最新发布
qq_42931285的博客
08-14 473
微信小程序中实现自动滚动
如何使用小程序做到回到顶部的效
xiaozhen0610的博客
07-19 265
这里小程序有个组件是可以实现的，那就是scroll-view组件，他具有很多的属性，其中我们要利用到以下两个属性来处理： scroll-top Number 设置竖向滚动条位置 bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 通过滚动触发事件，获取距离文档顶部的scrollTop值，当达到一定条件【&gt...
scroll-view 组件里的 scroll-into-view 属性实例
joe0235的博客
08-25 1248
微信小程序的scroll-view组件中，scroll-into-view 属性可以指定滚动到指定id的位置。），设置哪个方向可滚动，则在哪个方向滚动到该元素。scroll-y 是滑动方向。intoIndex 值应为某子元素id（下面写个简单的小实例，方便大家理解。
微信小程序官方组件展示之视图容器scroll-view
软件事业部的博客
08-11 742
微信小程序官方组件展示之视图容器scroll-view
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何使用 scroll-view 组件实现滚动动画，并提供...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
### 微信小程序中scroll-view实现自动滚动及高度自适应 #### 一、问题背景与需求分析 在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够...
详解微信小程序之scroll-view的flex布局问题
10-17
首先，scroll-view是微信小程序提供的一个视图区域，它可以实现内容的滚动。这对于创建可滚动的列表或者卡片非常有用，尤其是在处理大量内容时。然而，当我们将flex布局应用于scroll-view时，可能会遇到一些问题。...
微信小程序滑动scroll-view
weixin_45638909的博客
06-17 2052
首先说一下思路： 1.高度是通过一个二维数组存储的，所以我们只需要先通过自己的实际情况算出这个高度即可。 let arr = [ [0, 522, 1002], [1602, 2004,2006,2010], [2364, 2766], [3126, 3528], [3888, 4290] ] 2.点击的时候我们直接通过index...
微信小程序 ＜scroll-view＞的滑动的问题
qq_37182915的博客
08-28 572
微信小程序 scroll-view的滑动的问题 首先 <scroll-view>的样式（我这里随便设置的view） <scroll-view scroll-y="true" style="height: 300px"> <view style="width:100px;height:100px;background-color:red">1111</view> <view style="width:100px;height:100px;backgroun
【微信小程序】 scroll-view 实现锚点跳转
qq_25285531的博客
02-27 1219
在微信小程序中，使用 scroll-view 实现长页面的标记跳转，官方文档中没有例子演示，锚点标记主要是使用<scroll-view> 的scroll-into-view属性。 实现锚点跳转主要以下几点： 1、最外层容器使用scroll-view 2、赋值scroll-into-view，如：<scroll-viewscroll-into-view="{{toVie...
小程序开发框架——scroll-view滚动容器
iheyu(一个新手小白女PHP初学者)
11-28 1099
当我们页面内容元素过多时超过视图的编辑范围，我们就可以使用小程序的scroll-view 组件；     scroll-view是可滚动视图区域组件，提供了两种滚动方式 1、横向滚动通过 scroll-x 设置；     2、纵向滚动 通过 scroll-y 设置；                           3、upper-threshold 这个属性是距离顶部左边多远时（单位px）...
scroll-view标签实现滚动 并获取相关信息
04-27 480
<scroll-view scroll-y="true" style="margin-top:5px ;height: 100%" bindscroll="onScroll"> /* bindscroll监听滚动 event.detail = {scrollLeft, sc...
【微信小程序入门到精通】— view 和 scroll-view 你学会了么？
热爱生活，积极向上的阿酱！
09-20 1906
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！本篇文章主要介绍我们微信小程序常用的视图容器类组件，对于view、scroll-view 我们将逐一讲解。如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！本篇我们讲解了关于 view 标签和 scroll-view 标签的使用，希望各位可以余下时间自行练习，以及对各种参数进行修改以体会各种标签的作用。✨原创不易，还希望各位大佬支持一下。
微信小程序scroll-into-view无效问题
weixin_39118782的博客
08-21 3699
scroll-view组件中设置scroll-into-view属性（值设置为某子元素的id）可以实现滑动到该子元素的位置，scroll-into-view必须动态赋值，另外需要加上scroll-y/scroll-x、scroll-with-animation两个属性，以及滚动区域的高度设置成具体值才能滚动。
微信小程序实现锚点效果 scroll-view的scroll-into-view属性
FaxMiao的博客
06-06 4451
小程序中实现锚点效果，可以直接使用scroll-view的scroll-into-view属性就可以实现锚点效果，比较方便简单。那么需要用到scroll-view那些参数呢，下面具体讲讲：效果展示： wxml **注意：**viewid值是动态的，通过setData设置即可。js wxss......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值