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

server/2024/11/24 11:43:36/

在微信小程序中如果想实现内容滚动,需要使用 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;}}
}


http://www.ppmy.cn/server/144531.html

相关文章

高频面试题(含笔试高频算法整理)基本总结回顾30

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…

金融数据中心容灾“大咖说” | 美创科技赋能“灾备一体化”建设

中国人民银行发布的《金融数据中心容灾建设指引》&#xff08;JR/T 0264—2024&#xff09;已于2024年7月29日正式实施。这一金融行业标准对金融数据中心容灾建设中的“组织保障、需求分析、体系规划、建设要求、运维管理”进行了规范和指导。面对不断增加的各类网络、业务、应…

【二分答案+倍增快速幂】课堂练习

P1678 烦恼的高考志愿 #include<bits/stdc.h> using namespace std; const int N1e55; int n,m,a[N];long long bs(int x){int l1,rn;while(l<r){int midlr>>1;if(a[mid]x) return 0;if(a[mid]>x) rmid-1;else lmid1;}//根据前驱后继返回最小差值//printf(&…

大数据-231 离线数仓 - DWS 层、ADS 层的创建 Hive 执行脚本

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

大厂Java后端场景面试难题详解(一)

文章目录 两百万个生产者发送消息,仅一个消费者,如何高效设计锁?1. 使用无锁数据结构示例:无锁队列2. 使用轻量级锁示例:`ReentrantLock`3. 使用批量操作示例:批量生产4. 使用分段锁示例:分段锁5. 使用消息队列中间件示例:使用Kafka6. 使用乐观锁示例:乐观锁总结如何在…

Kafka-Consumer理论知识

一、上下文 之前的博客我们分析了Kafka的设计思想、Kafka的Producer端、Kafka的Server端的分析&#xff0c;为了完整性&#xff0c;我们接下来分析下Kafka的Consumer。《Kafka-代码示例》中有对应的Consumer示例代码&#xff0c;我们以它为入口进行分析 二、KafkaConsumer是什…

Kafka-创建topic源码

一、命令创建topic kafka-topics --create --topic quickstart-events --bootstrap-server cdh1:9092 --partitions 2 --replication-factor 2 二、kafka-topics脚本 exec $(dirname $0)/kafka-run-class.sh org.apache.kafka.tools.TopicCommand "$" 脚本中指定了…

超文本传输协议(HTTP)与超文本传输安全协议(HTTPS)

一、HTTP 超文本传输协议&#xff08;HyperText Transfer Protocol&#xff0c;HTTP&#xff09;是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。 HTTP 是用于从互联网服务器传输超文本到本地浏览器或者另一个服务器的协议。 HTTP…