微信小程序之scroll-view

最新推荐文章于 2024-08-14 09:00:32 发布
最新推荐文章于 2024-08-14 09:00:32 发布
阅读量1.3w 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 scrollview 滚动视图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hedong_77/article/details/54691981
版权
本文探讨了微信小程序中scroll-view组件的使用，强调在设置竖向滚动时需指定固定高度，并提供了实例代码。同时，文章提醒开发者注意避免在scroll-view内使用特定组件，并解释了scroll-into-view与scroll-top的关系，以及如何处理滚动与onPullDownRefresh事件的冲突。
摘要由CSDN通过智能技术生成

scroll-view
可滚动视图区域。
这里写图片描述

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
实例代码如下：

<view class="section">
  <view class="section__title">垂直滑动</view>
  <scroll-view scroll-y=
最低0.47元/天 解锁文章
农家&子弟
关注
专栏目录
微信小程序固定标签导航，点击标签滑动到相应内容，滚动内容切换相应标签
憨虫子的博客
06-21 9227
先来看一下效果图： 仿淘宝做的一个微信小商城的商品详情界面，点击顶部的宝贝、评论和详情标签时，页面滑动到相应的内容区域，同时滚动页面内容时，自动切换相应的导航标签。当然，这也适应于其他场景。 先来看一下wxml代码，其中一些wxml代码省略，但这并不会影响效果的实现，所以省略也无妨。 <view class="topnav" hidden='{{hiddenTopNav}}'&g...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度，现通过样式和布局实现高度自适应不设定高度
微信小程序scroll-view滑动点击跟随导航
xinnianchen的博客
07-29 406
【代码】【无标题】
微信小程序中实现自动滚动
最新发布
qq_42931285的博客
08-14 471
微信小程序中实现自动滚动
微信小程序 scroll-view
weixin_59727199的博客
09-15 7851
微信小程序 scroll-view
微信小程序 scroll-view滑动
weixin_45672809的博客
08-10 814
微信小程序 scroll-view滑动 scroll-view纵向滑动 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px <!-- wxml --> <scroll-view scroll-y="true" style="height:300px"> <view class="item_1"></view> <view class="item_2"><
微信小程序scroll-view组件
2301_76669854的博客
04-16 1325
当一个容器内容很多时，若容器无法显示完整内容，则可通过滚动操作查看所有内容 在微信小程序中scroll-view组件可以实现滚动效果
详解微信小程序之scroll-view的flex布局问题
10-17
本文将探讨在微信小程序中使用scroll-view组件时，如何解决flex布局带来的问题。 首先，scroll-view是微信小程序提供的一个视图区域，它可以实现内容的滚动。这对于创建可滚动的列表或者卡片非常有用，尤其是在处理...
微信小程序-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组件
海阳之新's blog
11-24 2124
一、效果 二、代码 学习scroll-view组件 2016/11/24 vsiryxm@qq.com \n 1、使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。 2、scroll-into-view意思是滚动到某一个ID元素顶部，类似锚点效果。 3、bindscrolltoupper表示
微信小程序scroll-view
Smile_ping的博客
07-02 692
scroll-view 使用scroll-view可滚动到对应区域, 注意: 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。 效果图 下图： 标题采用scroll-x横向滚动，内容采用scroll-y纵向滚动，当点击某个分类时滚动到对应区域 wxml <!-- 使用scroll-view 滚动到对应位置 --> <vie...
微信小程序踩坑之scroll-view
weixin_44667590的博客
06-19 565
scroll-view与fixed同时使用的问题
微信小程序开发（七） scroll-view 组件
竹毛言己
04-11 1963
微信小程序scroll-view组件
微信小程序：scroll-view
Continue的博客
05-30 2795
文章目录1. 概述2. 基本使用遇到问题 写在前面 最近在用小程序时多次踩坑scroll-view，决定记录下 1. 概述 scroll-view是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动，但是这其中也有些需要注意的问题。 2. 基本使用 <scroll-view class="historyScrollView" scroll-x enable-flex> <view class="sr
微信小程序手动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中设置，实现页面加载时自动滚动到指定位置。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值