微信小程序手指拖动 出现滑动下拉效果

该效果类似于电商小程序左侧滑动下拉的效果

scroll-y属性：允许纵向y轴滑动

scroll-x属性：允许横向x轴滑动

注意！使用竖向滚动时 必须给scroll-view一个固定高度

            使用横向滚动时 必须给scroll-view一个固定宽度

制作滚动效果图 wxml部分：

<scroll-view class="gundong" scroll-y>
  <view>时令水果</view>
  <view>新鲜蔬菜</view>
  <view>肉禽蛋品</view>
  <view>海鲜水产</view>
  <view>素食冻品</view>
  <view>面包蛋糕</view>
  <view>日用百货</view>
</scroll-view>

wxss部分：

.gundong {
  width: 100px;
  height: 200px;
}
.gundong view {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f1f1f1;
}
.gundong view:nth-child(1) {
  width: 100px;
}
.gundong view:nth-child(2) {
  width: 100px;
}
.gundong view:nth-child(3) {
  width: 100px;
}
.gundong view:hover {
  background-color: #fff;
  border-left: 2px solid red;
}

  鼠标拖动 出现滑动效果图：