小程序24-滚动效果:scroll-view组件详解

在微信小程序中如果想实现内容滚动,需要使用 scroll-view 组件

scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用户可以通过手指滑动或者点击滚动条滚动内容。

scroll-x允许横向滚动
scroll-y允许纵向滚动

实现横向/纵向滚动方式:

<!-- 实现横向滚动 -->
<scroll-view class="scroll-x" scroll-x>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>
<!-- 实现纵向滚动 -->
<scroll-view class="scroll-y" scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>
.scroll-x {
  width: 100%;
  white-space: nowrap;
  background-color: skyblue;

  view {
    display: inline-block;
    width: 300rpx;
    height: 80rpx;
    &:last-child {
      background-color: lightcoral;
    }
    &:first-child {
      background-color: lightseagreen;
    }
  }
}
.scroll-y {
  height: 400rpx;
  background-color: blue;
  margin-top: 10rpx;
  
  view {
    height: 400rpx;

    &:last-child {
      background-color: lightcoral;
    }
    &:first-child {
      background-color: lightseagreen;
    }
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 分发糖果

这段代码的算法思想是 贪心算法&#xff0c;通过两次遍历&#xff0c;分别从左到右、从右到左调整糖果分配&#xff0c;以满足题目中相邻评分较高的孩子必须获得更多糖果的要求&#xff0c;并最终计算出最少需要分配的糖果总数。 以下是代码的详细思想与执行过程&#xff1a; …

39页PDF | 毕马威_数据资产运营白皮书(限免下载)

一、前言 《毕马威数据资产运营白皮书》探讨了数据作为新型生产要素在企业数智化转型中的重要性&#xff0c;提出了数据资产运营的“三要素”&#xff08;组织与意识、流程与规范、平台与工具&#xff09;和“四重奏”&#xff08;数据资产盘点、评估、治理、共享&#xff09;…

【Redis_Day5】String类型

【Redis_Day5】String类型 String操作String的命令set和get&#xff1a;设置、获取键值对mset和mget&#xff1a;批量设置、获取键值对setnx/setex/psetexincr和incrby&#xff1a;对字符串进行加操作decr/decrby&#xff1a;对字符串进行减操作incrbyfloat&#xff1a;浮点数加…

linux安装mysql57——笔记

rpm -qa | grep mysql有东西就rpm -e 文件名 下载 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm安装 yum -y install mysql57-community-release-el7-10.noarch.rpm安装 yum -y install mysql-community-server如果出现Error: GPG c…

基于Java Springboot高校会议室预订管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

基于 NCD 与优化函数结合的非线性优化 PID 控制

基于 NCD 与优化函数结合的非线性优化 PID 控制 1. 引言 NCD&#xff08;Normalized Coprime Factorization Distance&#xff09;优化是一种用于非线性系统的先进控制方法。通过将 NCD 指标与优化算法结合&#xff0c;可以在动态调整控制参数的同时优化控制器性能。此方法特别…

数据库表设计范式

华子目录 MYSQL库表设计&#xff1a;范式第一范式&#xff08;1NF&#xff09;第二范式&#xff08;2NF&#xff09;第三范式&#xff08;3NF&#xff09;三范式小结巴斯-科德范式&#xff08;BCNF&#xff09;第四范式&#xff08;4NF&#xff09;第五范式&#xff08;5NF&…

中国省级新质生产力发展指数数据(任宇新版本)2010-2023年

一、测算方式&#xff1a;参考C刊《财经理论与实践》任宇新&#xff08;2024&#xff09;老师的研究&#xff0c;新质生产力以劳动者劳动资料劳动对象及其优化组合的质变为 基本内涵&#xff0c;借 鉴 王 珏 和 王 荣 基 的 做 法构建新质生产力发展水平评价指标体系如下所示&a…

【爬虫】Firecrawl对京东热卖网信息爬取(仅供学习)

项目地址 GitHub - mendableai/firecrawl: &#x1f525; Turn entire websites into LLM-ready markdown or structured data. Scrape, crawl and extract with a single API. Firecrawl更多是使用在LLM大模型知识库的构建&#xff0c;是大模型数据准备中的一环&#xff08;在…

Admin.NET框架前端由于keep-alive设置缓存导致的onUnmount未触发问题

bug版本&#xff1a;next分支&#xff0c;基于.NET6版本&#xff1b; 问题描述&#xff1a; 1、添加keep-alive后&#xff0c;在其下运行的组件会出现onActived(被关注时)和onDeactived(取消关注时)生命周期&#xff0c;而组件原有生命周期为onMounted(被创造时)和onUnmounted(…

机器学习day7-线性回归3、逻辑回归、聚类、SVC

7欠拟合与过拟合 1.欠拟合 模型在训练数据上表现不佳&#xff0c;在新的数据上也表现不佳&#xff0c;常发生在模型过于简单无法处理数据中的复杂模式时。 特征&#xff1a; 训练误差较高 测试误差也高 模型过于简化&#xff0c;不能充分学习训练数据中的模式 2.过拟合 …

【鸿蒙开发】第二十二章 IPC与RPC进程间通讯服务

目录 1 IPC与RPC通信概述 2 实现原理 3 约束与限制 4 使用场景 5 开发步骤 5.1 Native侧开发步骤 5.2 ArkTS侧开发步骤 6 远端状态订阅开发实例 6.1 使用场景 6.1.1 Native侧接口 6.2 ArkTS侧接口 6.3 Stub感知Proxy消亡&#xff08;匿名Stub的使用&#xff09; 1 …

【开发小技巧11】用经典报表实现badge list效果,根据回显内容用颜色加以区分

之前使用badge list实现首页指标数据回显&#xff0c;但是无法根据对应数据进行个性化动态展示&#xff0c;那要如何解决呢&#xff1f;下面就来看看如何通过经典报表实现badge list效果&#xff0c;根据回显内容用颜色加以区分。 普通经典报表 想要做成类似这样的效果并且能…

rust中解决DPI-1047: Cannot locate a 64-bit Oracle Client library问题

我们在使用rust-oracle crate连接oracle进行测试的过程中&#xff0c;会发现无法连接oracle&#xff0c;测试运行过程中抛出“DPI-1047: Cannot locate a 64-bit Oracle Client library”错误。该问题是由于rust-oracle需要用到oracle的动态连接库&#xff0c;我们通过安装orac…

cocos creator 3.8 一些简单的操作技巧,材质的创建 1

这是一个飞机的3D模型与贴图 导入到cocos中&#xff0c;法线模型文件中已经包含了mesh、material、prefab&#xff0c;也就是模型、材质与预制。界面上创建一个空节点Plane&#xff0c;将模型直接拖入到Plane下。新建材质如图下 Effect属性选择builtin-unlit&#xff0c;不需…

python oa服务器巡检报告脚本的重构和修改(适应数盾OTP)有空再去改

Two-Step Vertification required&#xff1a; Please enter the mobile app OTPverification code: 01.因为巡检的服务器要双因子认证登录&#xff0c;也就是登录堡垒机时还要输入验证码。这对我的巡检查服务器的工作带来了不便。它的机制是每一次登录&#xff0c;算一次会话…

数据集-目标检测系列- 荷花 莲花 检测数据集 lotus>> DataBall

数据集-目标检测系列- 荷花 莲花 检测数据集 lotus>> DataBall DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 贵在坚持&#xff01; 数据样例项目地址&#xff1a; * 相关项目 1&#xff09;数据集可视化项…

操作系统——揭开盖子

计算机执行时——取指执行 es:bx等于从0x9000开始&#xff0c;到0x90200结束

CTF 攻防世界 Web: SSRF Me write-up

题目名称-SSRF ME captcha 解码 目录扫描没有发现有用结果&#xff0c;根据提示 url 可能用来访问内部资源&#xff0c;根据题目名称可以猜测 ssrf。 其中 Captcha 用到 md5 加密截取&#xff0c;而且在每一次刷新网页时候会改变&#xff0c;可以写代码爆力枚举 Captcha 的值…

医学图像语义分割:前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室

医学图像语义分割&#xff1a;前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室 语义分割网络FCN&#xff1a;通过将全连接层替换为卷积层并使用反卷积上采样&#xff0c;实现了第一个端到端的像素级分割网络U-Net&#xff1a;采用对称的U形编解码器结构&#xff…