小程序开发之组件scroll-view（可滚动视图区域）

最新推荐文章于 2022-07-12 17:55:27 发布
最新推荐文章于 2022-07-12 17:55:27 发布
阅读量2k 收藏 3
点赞数
分类专栏： ONE PIECE--小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackJia2015/article/details/86082370
版权
本文介绍了小程序中scroll-view组件的使用，重点讲解了其作为可滚动视图区域的属性特点。强调了不能在组件内使用，并指出scroll-view的优先级高于页面滚动，因此建议使用页面级别的滚动以实现点击状态栏回到顶部的功能。
摘要由CSDN通过智能技术生成

scroll-view

scroll-view可滚动视图区域。


在这里插入图片描述

scroll-view属性

在这里插入图片描述

如果使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。

注：

  1. 请勿在 scroll-view 中使用textarea、map、canvas、video组件
  2. scroll-into-view 的优先级高于 scroll-top
  3. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
  4. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-
最低0.47元/天 解锁文章
M.Siebel
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序极速实战开发《二》scroll-view可滚动视图区域
03-29
可滚动视图区域。 组件用法：纵向滚动用法 Tip: 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。 当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出） 当滚动到底部时会...
scroll-view 可滚动视图区域组件
最新发布
2301_80735340的博客
06-28 183
当一个盒子里的内容过多，无法全部显示时，使用scroll-view，可以实现区域滑动，手动滑动展示盒子内未显示全的内容。scroll-view的属性过多，这里只介绍最基本的2个：横向滑动与纵向滑动。盒子内默认是纵向排列，想要实现横向滑动，需要做一些设置。接下来设置横向滑动(scroll - x)首先，为View设置样式，把它们设置盒子。
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
Ares5k
05-07 3680
微信小程序、swiper 轮播图、scroll-view 可滚动视图区域
小程序 map组件和scroll-view组件同时存在，过度效果，会出现卡顿
weixin_43840320的博客
09-28 1203
效果：点击地图，展示全屏地图，点击收起，展示scroll-view列表，会有卡顿现象 解决： 找到地图的中心点，不管是地图高度如何变化，地图始终以中心点来展示，使用时在animation过渡中调用这个方法就行 // 中心点 center(){ let that = this var myMap = wx.createMapContext('myMap') conso...
uni-app，使用scroll-view实现横向滚动
也简的博客
07-12 6750
uni-app使用scroll-view实现横向滚动；uni-app中使用scroll-view实现横向滚动
scroll-view 实现自定义模块的横向滑动（到屏幕的中间显示）
花花世界的博客
06-30 2473
想要实现的功能是：一个横向的tab栏，点击item的时候，item自动滚动到屏幕的中间展示，有想过用vant的插件库来实现，但是那个不支持自定义内容，所以只好自己实现了。 效果图展示： 代码实现： .wxml <view class="container"> <scroll-view id = "scroll-view" scroll-into-view="{{itemview}}" scroll-x class="scroll-x" scroll-left="{{scrollLef
uni-app 可滚动视图区域scroll-view的使用
lsjweiyi的博客
03-31 3847
官方文档 <template> <!-- 外围视图使用flex布局 --> <view style="display: flex" id="view1"> <!-- 左侧滚动区域 --> <view style="width: 25%"> <scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'"&gt
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序（九）scroll-view组件详细介绍
09-01
在微信小程序开发中，`scroll-view`组件是一个非常重要的组件，它用于实现页面的滚动效果，支持水平和垂直滚动。本文将深入介绍`scroll-view`组件的特性和使用方法。 ### 一、基本概念 `scroll-view`组件是一个可...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够正常工作，我们需要为其指定一个固定的高度值。然而，在某些场景下（例如内容长度不确定...
scroll-view 可滚动视图区域 用于区域滚动 轮播图效果实现； 快速入门刷课实践项目！
10-08
`scroll-view` 是 `UniApp` 提供的一个非常重要的组件，它的主要功能是创建一个可滚动的视图区域。在用户界面设计中，当内容过多无法一次性显示时，使用 `scroll-view` 可以实现上下或左右滚动查看全部内容，为用户...
uview+uniapp scroll-view的横向滚动
daysky的博客
06-11 3795
本来以为实现一个横向滚动的view很简单，但是实际上还是有个小坑的。因为scroll-view本身的display:flex不生效。 scroll-view的内层view元素需要： display: inline-block scroll-view的外层元素需要： white-space: nowrap 使得内部组件不换行。 再加上一些左右空行的渐变修饰，使得一个简单的横向滚动元素比较美观。 template部分: <view class="skill-sequence-panel-content
uni-app/小程序自定义导航栏+下拉刷新完美解决方案(封装原生page滑动组件)
Jerry的博客
04-30 6944
实际效果图 本组件优势： 1、使用小程序/uniapp原生page滑动，流畅度好于scroll-view组件 2、采用组件方式直接使用，只需在下拉刷新、上拉加载、加载完成时触发组件方法即可 3、包含无数据时空布局展示 4、可自定义下拉刷新、上拉加载样式 5、采用组件的双向绑定v-model 6、完美解决自定义导航后看不到下拉刷新loading的问题 我们在page.json中开启了自定义导航栏属性和下拉刷新属性后 // 开启下拉刷新 "enablePullDownRefresh": true // 自定义
微信小程序scroll-view组件可滚动视图区域
JackieDYH的博客
07-09 1633
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 .
ScrollView中嵌套高德地图MapView,解决触摸冲突
fanchunyankeep的博客
12-04 1546
public class MapContainer extends RelativeLayout { public MapContainer(Context context) { super(context); } public MapContainer(Context context, AttributeSet attrs) { super
MUI-区域滚动mScroll
LzzMandy的博客
01-07 1162
区域滚动的结构 &lt;div class="mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt; &lt;!--这里放置真实显示的DOM内容--&gt; &lt;/div&gt; &lt;/div&gt; . mui-scroll-wrapper的默认样式如下： .mui-scroll-wrapper
Android坐标和mScrollX/Y的含义
致我那些年搬过的砖
10-13 2742
首先说一下Android坐标： 坐标的原点在屏幕的左上角（0,0），水平向右为正X，竖直向下为正Y view和MotionEvent(触摸事件)中获取的位置关系图如下： 图中 那个深蓝色的点代表的是：手指触摸点 涉及到的方法一共有下面几个：view获取自身坐标：getLeft(),getTop(),getRight(),getBottom()view获取自身宽高：getHeight(),
小程序开发基础-scroll-view 可滚动视图区域
06-06
在小程序中，可以使用 scroll-view 组件来实现可滚动的视图区域。 使用 scroll-view 组件时，需要注意以下几点： 1. scroll-view 必须设置一个固定的高度或者宽度，否则无法滚动； 2. scroll-view 中的子元素必须...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值