微信小程序学习-组件Scroll-view

学习如何使用scroll-view上下滚动，左右滚动进行预览

一 scroll-y
1 新建一个页面 index
在这里插入图片描述
2 打开 index.wxml 添加代码

<view>--------竖向滚动--------</view>

<scroll-view 
class="scroll-y" /*创建一个样式类*/
scroll-y="true" /*允许纵向滚动*/>
	
</scroll-view>

3 打开 index.wxss 添加样式类代码

.scroll-y {
  height: 400rpx;
  background-color: rgb(111, 111, 111);/*添加背景颜色方便观察*/
}

编译后出现一块scroll，没有内容可以滑动
在这里插入图片描述
4 修改 index.wxml 代码

<view>--------竖向滚动--------</view>
<scroll-view class="scroll-y" scroll-y="true">
/*添加多个view标签 这里添加12个*/
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
</scroll-view>

5 修改 index.wxss，为 view 添加样式


.scroll-y {
  height: 400rpx;
  background-color: rgb(111, 111, 111);
}

/*添加后代样式，一次性统一修改view样式，下面解释，做标记①*/
.scroll-y view {
  height: 10%;
}

/*添加后代样式，按顺序修改，最高两个的样式为黑色，透明度为0*/
.scroll-y view:nth-child(1) {
  background-color: rgba(0, 0, 0,0);
}

.scroll-y view:nth-child(2) {
  background-color: rgba(0, 0, 0,0);
}

/*为view设置相同的背景色 蓝色，但是彼此之前透明度不同*/
.scroll-y view:nth-child(3) {
  background-color: rgba(0, 0, 255, 0.1);
}

.scroll-y view:nth-child(4) {
  background-color: rgba(0, 0, 255, 0.2);
}

.scroll-y view:nth-child(5) {
  background-color: rgba(0, 0, 255, 0.3);
}

.scroll-y view:nth-child(6) {
  background-color: rgba(0, 0, 255, 0.4);
}

.scroll-y view:nth-child(7) {
  background-color: rgba(0, 0, 255, 0.5);
}

.scroll-y view:nth-child(8) {
  background-color: rgba(0, 0, 255, 0.6);
}

.scroll-y view:nth-child(9) {
  background-color: rgba(0, 0, 255, 0.7);
}

.scroll-y view:nth-child(10) {
  background-color: rgba(0, 0, 255, 0.8);
}

.scroll-y view:nth-child(11) {
  background-color: rgba(0, 0, 255, 0.9);
}

.scroll-y view:nth-child(12) {
  background-color: rgba(0, 0, 255, 1);
}

编译后出现类似天空的渐变效果，并且可以上下滑动
在这里插入图片描述
二 scroll-x
1 打开 index.wxml 添加代码

<view>--------横向滚动--------</view>
<scroll-view 
class="scroll-x" /*创建横向滚动样式*/
scroll-x="true" /*允许横向滚动*/ >
/*创建多个view，这里创建12个view*/
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
</scroll-view>

2 打开 wxss，添加样式

.scroll-x{
  width: 100%;/*覆盖宽度*/
  height: 200rpx;
  background-color: rgb(111, 111, 111);
  /*这一步很重要，这里做一下标记②*/
  white-space: nowrap;
}

.scroll-x view{
  height: 100%;
  width: 10%;
  /*这一步很重要，与标记①配合，这里做一下标记③*/
  display: inline-block;
}

.scroll-x view:nth-child(1){
  background-color:#e4080a;
}

.scroll-x view:nth-child(2){
  background-color:#ea3e10;
}

.scroll-x view:nth-child(3){
  background-color: #ee7019;
}

.scroll-x view:nth-child(4){
  background-color: #e9b61f;
}

.scroll-x view:nth-child(5){
  background-color: #d9f531;
}

.scroll-x view:nth-child(6){
  background-color: #75e805;
}

.scroll-x view:nth-child(7){
  background-color: #30aa35;
}

.scroll-x view:nth-child(8){
  background-color: #3aabbd;
}

.scroll-x view:nth-child(9){
  background-color: #266bd8;
}

.scroll-x view:nth-child(10){
  background-color: #2739db;
}

.scroll-x view:nth-child(11){
  background-color: #4818de;
}

.scroll-x view:nth-child(12){
  background-color: #a204bd;
}

编译后出现类似彩虹的七彩效果，并可以左右滑动
在这里插入图片描述
三原理解释
scroll 标签与其他标签不同，view 标签在scroll 标签下的统一样式修改，只支持后代样式！

由于 view 标签是块级元素，会自动占满一行，当多个view同时排放时，默认自动换行。因此在上下滑动的格式配置时，不用过多的进行考虑，用 view 完全可以达到预期的效果。但当想把 view 运用于左右滑动当中时，标记②的代码设置 scroll 不自动换行。可仅有这一句代码并无法达到去除自动换行的效果，还需要标记③的代码，将 view 转换成 inline-block 显示，即行内块元素（既可以设置宽高，也不占满一行）。

金三亲

发布了45 篇原创文章 · 获赞 40 · 访问量 1万+

私信关注

微信小程序学习-组件Scroll-view

猜你喜欢