微信小程序 滚动组件

预览图

垂直滚动

主要代码

index.wxml

<scroll-view class="scroll-y" scroll-y="true">
  <view class="item" wx:for="123456789">{{item}}</view>
</scroll-view>

index.wxss
注: 要配置高度不然不生效哦~

.scroll-y {
  height: 200px;
}
.item {
  width: 100px;
  height: 100px;
  font-size: 48px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.item:nth-child(2n) {
  background-color: green;
}

.item:nth-child(2n+1) {
  background-color: blue;
}

水平滚动

主要代码

index.wxml

<scroll-view class="scroll-x" scroll-x="true">
  <view class="item" wx:for="123456789">{{item}}</view>
</scroll-view>

index.wxss
注: 要配置不允许换行,并且item设置为行内元素,不然不生效哦~

.scroll-x {
  white-space: nowrap;
}

.scroll-x .item {
  display: inline-block;
}

.item {
  width: 100px;
  height: 100px;
  font-size: 48px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.item:nth-child(2n) {
  background-color: green;
}

.item:nth-child(2n+1) {
  background-color: blue;
}

水平滚动 自定义滑动条

主要代码

index.wxml

<scroll-view class="scroll-x custom" scroll-x="true">
  <view class="item" wx:for="123456789">{{item}}</view>
</scroll-view>

index.wxss

.scroll-x {
  white-space: nowrap;
}

.scroll-x .item {
  display: inline-block;
}

.item {
  width: 100px;
  height: 100px;
  font-size: 48px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.item:nth-child(2n) {
  background-color: green;
}

.item:nth-child(2n+1) {
  background-color: blue;
}

 
.scroll-x.custom .item {
  margin: 20px auto;
}

.scroll-x.custom ::-webkit-scrollbar {
  width: 12rpx;
  height: 12rpx;
  color: #dddddd;
}

.scroll-x.custom ::-webkit-scrollbar-track {
  border-radius: 12rpx;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #dddddd;
  margin: 320rpx;
}

.scroll-x.custom ::-webkit-scrollbar-thumb {
  border-radius: 12rpx;
  background-color: #ff5153;
}