目录web前端全系列 教程
1839个小节阅读：2243.9k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本，未来主流的版本
人工智能 教程
顺势而为，AI创新未来
大厂算法 教程
算法，程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
可滚动视图区域。可实现容器内元素水平和垂直方向滚动
给容器设置scroll-x，可实现水平滚动
xxxxxxxxxx<!-- scroll.wxml --><view> <scroll-view class="scroll-view_H" scroll-x="true"> <view class="scroll-view-item demo-text-1"></view> <view class="scroll-view-item demo-text-2"></view> <view class="scroll-view-item demo-text-3"></view> </scroll-view></view>当然要配合样式实现
x/* scroll.wxss */.scroll-view_H{ /* 规定容器内元素不进行换行 */ white-space: nowrap;}
.scroll-view-item { display: inline-block; width: 100%; height: 300rpx;}.demo-text-1{ background-color: red;}.demo-text-2{ background-color: green;}.demo-text-3{ background-color: blue;}给容器设置scroll-y，可实现垂直滚动
xxxxxxxxxx<!-- scroll.wxml --><view> <scroll-view class="scroll-view_V" scroll-y="true"> <view class="scroll-view-item demo-text-1"></view> <view class="scroll-view-item demo-text-2"></view> <view class="scroll-view-item demo-text-3"></view> </scroll-view></view>当然要配合样式实现
xxxxxxxxxx/* scroll.wxss */.scroll-view-item { width: 100%; height: 300rpx;}.demo-text-1{ background-color: red;}.demo-text-2{ background-color: green;}.demo-text-3{ background-color: blue;}.scroll-view_V{ height: 300rpx;}| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| scroll-x | boolean | false | 否 | 允许横向滚动 |
| scroll-y | boolean | false | 否 | 允许纵向滚动 |
| scroll-top | number/string | 否 | 设置竖向滚动条位置 | |
| scroll-left | number/string | 否 | 设置横向滚动条位置 | |
| refresher-enabled | boolean | false | 否 | 开启自定义下拉刷新 |
xxxxxxxxxx<view> <!-- 水平滚动 --> <scroll-view refresher-enabled scroll-left="50" class="scroll-view_H" scroll-x="true"> <view class="scroll-view-item demo-text-1"></view> <view class="scroll-view-item demo-text-2"></view> <view class="scroll-view-item demo-text-3"></view> </scroll-view> <!-- 垂直滚动 --> <scroll-view refresher-enabled scroll-top="50" class="scroll-view_V" scroll-y="true"> <view class="scroll-view-item demo-text-1"></view> <view class="scroll-view-item demo-text-2"></view> <view class="scroll-view-item demo-text-3"></view> </scroll-view></view>实时效果反馈
1. 在小程序中，下列那个属性可以设置滚动视图容器垂直方向滚动：
A scroll-x
B scroll-y
C scroll-top
D scroll-left
答案
1=>B