欧非资源网：安全、免费、专业放心的资源下载站！ 最新软件|软件分类

您的位置：欧非资源网 > 电脑专区 > 电脑教程 > 微信小程序入门基础教程：可滚动的视图区域组件（滚动条）

微信小程序入门基础教程：可滚动的视图区域组件（滚动条） 时间：2020-05-06 18:57作者：admin来源：未知人气：614我要评论(0)

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

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

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

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

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

scroll组件

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

第一步，我们先搞点代码上去，输入这个<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>

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

参考代码：（注意，.out和.box之间要留点空格）
  .out .box{
  width: 100px;
  height: 100px;
  background: greenyellow;
}

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

<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>

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

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

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

小程序学习日志7：可滚动的视图区域组件（滚动条）

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

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

文章评论

查看所有0条评论>>

分类索引