微信小程序之滑块scroll-view

我们要做的东西：

滑块的视频

我们先做个基本的图片和文字(wxm;)：

<scroll-view>
  <view class="scrollItem">
    <image src="https://bkimg.cdn.bcebos.com/pic/fc1f4134970a304e251fd88e8191b086c9177f3ef634?x-bce-process=image/format,f_auto/resize,m_lfit,limit_1,h_979" />
    <text>《护花使者》是中国香港男歌手李克勤演唱的粤语歌曲 [1]，由长谷川集平作曲，潘伟源填词，苏德华编曲 [2]，收录在李克勤于1991年6月9日通过环球唱片发行的粤语专辑《雨中街头剧》中 [3]。</text>
  </view>
</scroll-view>

然后把item多复制几份：

然后我们写样式(wxss)： 

.scrollContainer {
  display: flex;
  flex-direction: row;
  padding: 20rpx;
}

.scrollItem {
  width: 200rpx;
  margin-right: 20rpx;
}

.scrollItem image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
}

.scrollItem  text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

scroll-view的里面也要有属性：

<scroll-view class="scrollContainer" enable-flex scroll-x>

enable-flex 这个是允许布局 flex的，不写flex是不起作用的，不过新版本已经不使用了，不过还能有效果，具体用什么替代，我还不知道。

scroll-x 这个就是我们点了可以滑动的，x左右滑动

运行起来，就得到了我们想要的效果。

滑块的视频