当前位置: 主页 > Office办公 > 电脑专区 > 电脑教程 > 微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

  • 2021-11-21
  • 来源/作者: 菜鸟图库/ 菜鸟图库
  • 474 次浏览

我们今天来讲一个可滚动的视图区域组件。

可滚动的视图区域组件是什么?

简单来说,就是当窗口面积不大的时候,可以通过滚动看到更多的内容。

这个就有点类似新闻类小程序的功能了。具体是什么大家也能想得到。


scroll-view组件的scroll-y和scroll-x属性:竖着拖动和横着拖动

老规矩,我们先打开微信小程序开发者文档看一下这个组件的一些属性。

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

scroll组件

在开始的之前,我们先新建一个项目,同样的,把wxss和wxml的内容清除一下,这些内容对我们现在来说还没什么用处。

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

第一步,我们先搞点代码上去,输入这个<scroll-view>并给这个一个样式。这里,给scroll-view组件设置的样式名字为out,里面的字符设置的样式名字为box。

参考代码:
<scroll-view class="out">
<view class="box">111</view>
<view class="box">222</view>
<view class="box">333</view>
<view class="box">444</view>
<view class="box">555</view>
<view class="box">666</view>
<view class="box">777</view>
</scroll-view>

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

第二步,给out设置样式,样式给个宽度为100%,高度为200像素,背景颜色为浅灰色。

参考wxss样式代码:
.out{
width: 100%;
background: #ccc;
height:200px;
}

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

第三步,给里面的box设置样式,设置个宽为100像素,高为100像素,背景颜色随便挑个好看的就行。

参考代码:(注意,.out和.box之间要留点空格)
.out .box{
width: 100px;
height: 100px;
background: greenyellow;
}

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

做到这一步大家有没有发现,这个页面上的内容是无法拖动的,这个时候我们可以在<scroll-view>里面放入纵向拉动的代码:scroll-y,看看效果。

大家有没有看到,已经可以拖动了。

参考代码:
<scroll-view class="out" scroll-y></scroll-view>

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

那么该如何让这里面的这些数字横向排放呢?

这里可以在样式里面添加下列代码:display:inline-block

参考样式代码:
.out .box{
width: 100px;
height: 100px;
background: greenyellow;
display: inline-block;
}

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

那么,该如何把他们放在一行里面呢?这个时候我们需要在.out样式里面的高度限制删掉,添加一个white-space:nowrap即可。

.out部分参考代码:
.out{
width: 100%;
background: #ccc;
white-space: nowrap;
}

这个时候我们可以看到,样式改变了,变成一行排布的了,不换行了,看起来也好看多了。

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

不过,现在的无法拖动的,这是因为我们没有换,我们需要将<scroll-view>里面的scroll-y代码换成scoll-x。

这个时候就可以自由拖动了。

参考代码:
<scroll-view class="out" scroll-x></scroll>

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

我们可以在这一块块里面加上一些间隔。添加间隔为5像素。

参考代码:
.out .box{
width: 100px;
height: 100px;
background: greenyellow;
display: inline-block;
margin-right: 5px;
}

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 



<scroll-view>组件中的upper-threshold和lower-threshold属性

这两个需要联系整个小程序的框架来说,在这里先不跟大家说了,这两个属性的作用是一种效果,当我们拖动的时候回触发的事件,这个以后有时间的话再慢慢跟大家说。

<scroll-view>组件中的scroll-top和scroll-left属性:滚动条的初始位置

这两个属性是设置滚动条位置的,我们有的时候在小程序里面看到的默认位置在中间的,基本上都是这个属性实现的,我们现在来看看这两个属性。

大家可以看到,当我们输入scroll-left="260"代码后,按住Ctrl+s进行保存, 页面上显示的滚动条滚动的位置就放到了中间(我没动手)。

参考代码:
<scroll-view class="out" scroll-x scroll-left="260"></scroll-view>

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

scroll-top是竖向的设置,实现出来的效果都差不多,详细的我们以后会再说的。

<scroll-view>组件中的scroll-with-animation属性:动画过渡效果

这个就是实现滚动条的一个动画过渡的效果,大家有兴趣可以自己去尝试一下,这里小编也想给大家瞧瞧,但是不太好搞,把代码给大家。

参考代码:
<scroll-view class="out" scroll-x scroll-left="360" scroll-with-animation><scroll-view>

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

 

<scroll-view>组件的其他属性

这里面还有很多的属性我们还没有讲到,这里的很多属性都用不太多,上面讲的几个是比较重要的几点用法,其他的以后有时间会慢慢说的。

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)