当前位置: 首页 > news >正文

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

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>

相关文章:

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

7.1 视图容器组件 7.1.2 scroll-view组件 scroll-view组件时是滚动的视图容器&#xff0c;可在竖直方向或水平方向上滚动&#xff0c;展示超出屏幕高度或宽度的内容。 使用竖直方向滚动时&#xff0c;需要通过wxss的height样式给scroll-view设置一个固定高度&#xff0c;超出…...

【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解

前言&#xff1a;本文进行布线铺铜实战及详解布线铺铜的细节 在本专栏中【立创EDA-PCB设计基础】前面完成了布线铺铜前的设计规则的设置&#xff0c;接下来进行布线 布局原则是模块化布局&#xff08;优先布局好确定位置的器件&#xff0c;例如排针、接口、主控芯片&#xff…...

Node.JS CreateWriteStream(大容量写入文件流优化)

Why I Need Node.JS Stream 如果你的程序收到以下错误&#xff0c;或者需要大容量写入很多内容(几十几百MB甚至GB级别)&#xff0c;则必须使用Stream文件流甚至更高级的技术。 Error: EMFILE, too many open files 业务场景&#xff0c;我们有一个IntradayMissingRecord的补…...

安卓开发之自动缩放布局

AutoScalingLayout 适用于 Android 的自动缩放布局。 替换布局&#xff1a; 我们只需要替换根布局所需的自动缩放&#xff0c;子布局也将实现自动缩放。 原始布局AutoScalingLayout相对布局ASRelativeLayout线性布局ASLinearLayoutFrameLayout&#xff08;框架布局&#xff…...

DDD系列 - 第9讲 实体、值对象

目录 引言一、实体1.1 数据库实体1.2 数据库实体 vs. DDD实体1.3 DDD实体的本质及其识别规则1.4 代码中如何定义实体二 、值对象2.1 值对象 vs. 附属属性2.2 值对象 vs. 实体2.3 代码中如何定义值对象2.4 何时使用值对象引言 之前我在《DDD系列 - 第4讲 从架构师的角度看待DDD…...

5分钟做自己的微信红包封面

文章目录 怎么制作自己的红包封面&#xff1f;开通红包封面的要求如下&#xff1a;收费情况制作具体网站&#xff1a;https://chatapi.onechat.fun/register?affYoU6 提交审核logo封面、挂件、气泡证明材料 发放红包封面其他 怎么制作自己的红包封面&#xff1f; 开通红包封面…...

pytorch中BCELoss 和 binary_cross_entropy_with_logits之间的区别

在PyTorch中&#xff0c;binary_cross_entropy_with_logits是一个函数&#xff0c;而BCELoss是一个类。它们都是用于二分类任务的损失函数。它们之间存在一些区别如下。 torch.nn.functional.binary_cross_entropy_with_logits&#xff1a; binary_cross_entropy_with_logits…...

无刷电机学习-方波电调 程序篇1(AM32)

一、AM32简介 AM32 固件专为 ARM 处理器设计&#xff0c;用于控制无刷电机 (BLDC)。该固件旨在安全、快速、平滑、快速启动和线性油门。它适用于多种车辆类型和飞行控制器。 AM32具有以下特点&#xff1a; 可通过 betaflight 直通、单线串行或 arduino 升级固件伺服 PWM、Dsh…...

如何自己制作一个属于自己的小程序?

在这个数字化时代&#xff0c;小程序已经成为了我们生活中不可或缺的一部分。它们方便快捷&#xff0c;无需下载安装&#xff0c;扫一扫就能使用。如果你想拥有一个属于自己的小程序&#xff0c;不论是为了个人兴趣&#xff0c;还是商业用途&#xff0c;都可以通过编程或者使用…...

HTML 入门手册(二)

目录 HTML 入门手册(一) 10-表单 11-input标签 11.1文本框 (text) 11.2密码框 (password) 11.3单选按钮 (radio) 11.4复选框 (checkbox) 11.5普通按钮 11.6提交按钮 (submit) 11.7重置按钮 (reset) 11.8隐藏域 (hidden) 11.9文件上传 (file) 11.10数字输入 (numbe…...

零基础学Python(5)— 基本数据类型

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。在内存中存储的数据可以有多种类型。例如&#xff1a;一个人的姓名可以用字符型存储&#xff0c;年龄可以使用数值型存储&#xff0c;婚姻状况可以使用布尔型存储。这里的字符型、数值型、布尔型都是Python语言中提供的基本…...

centos7安装Redis7.2.4

文章目录 下载Redis解压Redis安装gcc依赖&#xff08;Redis是C语言编写的&#xff0c;编译需要&#xff09;编译安装src目录下二进制文件安装到/usr/local/bin修改redis.conf文件启动redis服务外部连接测试 参考&#xff1a; 在centos中安装redis-5.0.7 Memory overcommit must…...

certificate-transparency-go用例

文章目录 证书的SCT列表验证SCT依赖包加载证书初始化log机构信息离线验证在线验证 证书的SCT列表 浏览器对证书链的合法性检查通过后&#xff0c;会再检查服务端证书附件里的SCT列表&#xff08;Signed Certificate Timestamp&#xff09;&#xff1b; 浏览器内置了一批certif…...

前端上传大文件使用分片上传

前提:分片上传针对于一些大的文件、普通大小的文件使用element中的上传组件可以实现效果,例如几G的文件就会比较卡,所以这时候就需要用到分片上传~ 前端及后端分片上传笔记 效果:(上传进度展示) 效果:(上传成功的效果展示) 1、 新建一个上传组件 2、使用vue-simple-…...

Kotlin 解构声明

在一些像 Python 的高级语言中&#xff0c;支持 多返回值的&#xff0c;例如 x, y get_position() 这样操作接收。 而在 Kotlin 中&#xff0c;虽然不支持 多返回值&#xff0c;但有类似的 解构&#xff08;destructure&#xff09; 对象功能&#xff0c;叫做 解构声明。 用…...

基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(四)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/n…...

遗传算法原理详细讲解(算法+Python源码)

博主介绍&#xff1a;✌专研于前后端领域优质创作者、本质互联网精神开源贡献答疑解惑、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战&#xff0c;深受全网粉丝喜爱与支持✌有需要可以联系作者我哦&#xff01; &#x1f345;文末获…...

Linux文本处理指令汇总

Linux文本处理命令主要包括以下几种&#xff1a; grep&#xff1a;用于在文件中搜索包含指定字符串的行。 [roothanyw-bash-python ~]# grep root /etc/passwd root:x:0:0:root:/root:/bin/bash operator:x:11:0:operator:/root:/sbin/nologinawk&#xff1a;用于在文件中进行…...

Prompt Engineering

目录 什么是提示工程 什么是提示工程 在当今人工智能领域&#xff0c;提问大型语言模型&#xff08;Large Language Models&#xff0c;LLM&#xff09;已经成为一种常见的实践&#xff0c;但如何向这些模型提出问题&#xff0c;或者更准确地说&#xff0c;如何引导它们产生期…...

Ansible剧本playbooks

playbooks概述 Ansible剧本&#xff08;playbook&#xff09;是用于配置、部署和管理被控节点的一种描述文件。通过编写详细的剧本描述和执行其中的任务&#xff08;tasks&#xff09;&#xff0c;可以使远程主机达到预期的状态。剧本由一个或多个"play"组成的列表构…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...