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

7.1 视图容器组件

7.1.2 scroll-view组件

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

使用竖直方向滚动时,需要通过wxss的height样式给scroll-view设置一个固定高度,超出设定高度的内容会被隐藏,通过页面滚动可以将它们显示出来。

scroll-view组件支持的属性如下:

scroll-x:默认值false,允许横向滚动

scroll-y:默认值false,允许纵向滚动

upper-threshold:默认值50,距顶部/左边多远时,触发scrolltoupper事件

lower-threshold:默认值50,距底部/右边多远时,触发scrolltolower事件

scroll-top:设置竖向滚动条位置

scroll-left:设置横向滚动条位置、

scroll-into-view:值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素

scroll-with-animation:默认值为false,在设置滚动条时使用动画过渡

enable-back-to-top:默认值为false,iOS单击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向。

bindscrolltoupper:滚动到顶部/左边时触发

bindscrolltolower:滚动到底部/右边时触发

bindscroll:滚动时触发,event.detail = {scrollLeft,scrollTop,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}

upper-threshold和lower-threshold是两个边界值,用于设置触发scrolltoupper事件,scrolltolower事件,两个属性单位默认为px,从基础库2.4.0起来可以传入单位(rpx或px)

scroll-top,scroll-left,scroll-into-view都用于设置滚动条位置,应该设置为变量而不是固定值。即

scroll-top = "{{scrollTop}}"

scroll-into-view = "{{toView}}"

scroll-top,scroll-left单位默认为px,从基础库2.4.0起来可以传入单位(rpx或px)

scroll-into-view通过子组件设定滚动的位置,id属性必须唯一,即同一页面的两个组件不能取相同的值,例如下面这段代码,如果在JS文件中奖toView的值改为view2,scroll-view就会滚动到第二个view的位置。

<scroll-view scroll-y style="height:20px;" scroll-into-view="{{toView}}">

  <view id="view1" class="scroll-view-item"></view>

  <view id="view2" class="scroll-view-item"></view>

</scroll-view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643407.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Spring Boot中使用ZXing开源库生成带有Logo的二维码

在上一篇文章的基础上&#xff0c;我们将进一步扩展功能&#xff0c;实现在生成的二维码中嵌入Logo图片。这样的二维码更具个性化和识别度。让我们逐步完成这个功能。 第一步&#xff1a;引入Logo图片 首先&#xff0c;准备一张用作Logo的图片&#xff0c;并确保它的大小适中…

HIS项目介绍、项目环境准备、版本控制介绍、Git基础、Git指针、Git分支、Git标签

案例1&#xff1a;项目环境准备 环境准备说明&#xff1a; 本阶段共使用虚拟机6台&#xff0c;操作系统使用RockyLinux8.6 环境准备要求&#xff1a; 最小化安装即可配置好主机名和IP地址搭建好yum源关闭防火墙和SELinux!!! 项目主机列表 主机名IP地址规格角色服务Progra…

上位机图像处理和嵌入式模块部署(windows opencv)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 opencv可以运行在多个平台上面&#xff0c;当然windows平台也不意外。目前来说&#xff0c;opencv使用已经非常方便了&#xff0c;如果不想自己编译…

红黑树浅浅学习

红黑树浅浅学习 红黑树概念红黑树平衡性调整 红黑树概念 二叉树&#xff1a;二叉树是每个节点最多有两个子树的树结构。二叉查找树&#xff1a;又称“二叉搜索树”&#xff0c;左孩子比父节点小&#xff0c;右孩子比父节点大&#xff0c;还有一个特性就是”中序遍历“可以让结…

element-ui 打包流程源码解析——babel 相关

目录 1&#xff0c;babel-cli2&#xff0c;babel-core3&#xff0c;.babelrc3.1&#xff0c;presets3.2&#xff0c;plugins其他相关 该文章是为了更好的理解&#xff1a;element-ui 打包流程源码解析&#xff08;上&#xff09; 第2.5节 npm run build:utils 打包命令 "…

初识SQL注入

目录 注入攻击 SQL注入 手工注入 Information_schema数据库 自动注入 介绍一下这款工具&#xff1a;sqlmap 半自动注入 前面给大家通过学习练习的方式将XSS攻击的几种形式和一些简单的靶场和例题的演示&#xff0c;从本篇开始我将和小伙伴们通过边复习、边练习的方式来进…

Android 访问存储卡的三种主要的目录

Android 访问存储卡&#xff08;即外部存储&#xff09;通常涉及以下三种主要的目录&#xff1a; 1. 外部存储公共目录 (Public External Storage) 这些目录对所有应用都是可见的&#xff0c;并且不需要任何特殊权限来读取媒体文件。但是从Android 10&#xff08;API 级别 29…

深入浅出hdfs-hadoop基本介绍

一、Hadoop基本介绍 hadoop最开始是起源于Apache Nutch项目&#xff0c;这个是由Doug Cutting开发的开源网络搜索引擎&#xff0c;这个项目刚开始的目标是为了更好的做搜索引擎&#xff0c;后来Google 发表了三篇未来持续影响大数据领域的三架马车论文&#xff1a; Google Fil…

猫用空气净化器哪些好?五款宠物空气净化推荐!

如今&#xff0c;养宠物的家庭越来越多了&#xff01;家里因此变得更加温馨&#xff0c;但同时也会带来一些问题&#xff0c;比如异味和空气中的毛发可能会对健康造成困扰。 为了避免家中弥漫着异味&#xff0c;特别是来自宠物便便的味道&#xff0c;一款能够处理家里异味的宠…

第17章 项目干系人管理

文章目录 项目干系人管理包括识别能够影响项目或会受项目影响的人员、团体或组织&#xff0c;分析干系人对项目的期望和影响&#xff0c;制定管理策略有效调动干系人参与项目决策和执行。 17.1管理基础 17.1.1管理的重要性 每个项目都有干系人&#xff0c;他们会受到项目积极或…

PHP+SOCKET 服务端多进程处理多客户端请求 demo

服务端 $socket socket_create(AF_INET,SOCK_STREAM,SOL_TCP); socket_bind($socket,0,95012) or die( server bind fail: . socket_strerror(socket_last_error())); socket_listen($socket,5);$child 0; //初始化子进程数 while(true){$client socket_accept($socket);$pi…

【大数据】YARN调度器及调度策略

YARN调度器 YARN负责作业资源调度&#xff0c;在集群中找到满足业务的资源&#xff0c;帮助作业启动任务&#xff0c;管理作业的生命周期。 ​ YARN技术架构 ​ 目前&#xff0c;Hadoop作业调度器主要有三种&#xff1a;先进先出调度器&#xff08;First In First Out&…

electron-updater使用整理

参考文章&#xff1a; 手撸 Electron 自动更新&#xff0c;再繁琐也要搞懂它 - 掘金 (juejin.cn)Electron 自动更新&#xff0c;绕过 latest.yml 使用自定义接口 - 掘金 (juejin.cn)electron-updater实现热更新完整流程 - 掘金 (juejin.cn) 一、 配置 1. 安装electron-updat…

【正点原子STM32】搭建开发环境(安装MDK和器件支持包、DAP仿真器和ST LINK仿真器、CH340串口驱动)

一、常用开发工具简介 MDKDAP 二、安装MDK 1、MDK简介2、如何获取MDK3、安装MDK和器件支持包 三、安装仿真器驱动 DAP仿真器免驱ST LINK仿真器驱动安装方法 ST LINK驱动及教程 四、安装CH340 USB虚拟串口驱动 1、安装CH340 USB虚拟串口驱动2、为什么要安装CH340 USB虚拟…

Google ASPIRE框架:赋予大型语言模型(LLMs)自我评估的新动力

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

大数据学习之Flink、比较不同框架的容错机制

第一章、Flink的容错机制 第二章、Flink核心组件和工作原理 第三章、Flink的恢复策略 第四章、Flink容错机制的注意事项 第五章、Flink的容错机制与其他框架的容错机制相比较 目录 第五章、Flink的容错机制与其他框架的容错机制相比较 Ⅰ、Flink的容错机制与其他框架的容…

springboot 整合 ElasticSearch 方法 (一)

下载 ES 相当于安装 MySQL, 可以在官网上下载 (链接在后面). 要注意安装的 ES 的版本要和项目中用的 Springboot 的版本对应. 比如我用的 Springboot 版本是 2.6, 所以ES要下载7.15 版本的. 官网链接: https://www.elastic.co/cn/downloads/elasticsearch 点右边这个查看更多…

腾讯云4核8G12M服务器我的世界mc够多少人?

mc我的世界服务器4核8g够多少人&#xff1f;80人&#xff0c;4核8G服务器最多支持80人同时在线。关于我的世界服务器的CPU和内存有用户测试过&#xff0c;阿腾云atengyun.com认为最多可以支持80人同时在线。如果运行的云服务器配置较低&#xff0c;启动游戏后可以在左下角看到配…

展厅设计更好的方法

一、与公司形象契合 在展厅规划时必定要留意公司的LOGO、主色调&#xff0c;以及企业文明。在展现时使用丰满的展厅规划传达出企业的理念。而在功用设置上&#xff0c;应当考虑内涵功用&#xff0c;从展厅作业人员的视点动身&#xff0c;为展厅作业人员提供杰出的环境&#xff…

【Java】---反射:Class、Filed、Constructor、Method

【Java】—反射 文章目录 【Java】---反射一、反射1.1 概念1.2 操作步骤 二、Class类2.1 概念2.2 方法2.2.1 getName()2.2.2 getSimpleName()2.2.3 getPackage()2.2.4 getSuperclass()2.2.5 getInterfaces() 三、Field类3.1 概念3.2 方法3.2.1 setAccessible(Boolean b)3.2.2 s…