微信小程序 滚动视图弹性布局

.wxml

<scroll-view class="scroll" scroll-x="true" scroll-left="string" enable-flex="true" bindscrolltolower="history">
  <block wx:for="{{history}}" wx:key="history">
     <view class="history-content">
       <image src="{{item.img}}"></image>
       <view>{{item.name}}</view>
     </view>
  </block>
</scroll-view>

.wxss

.scroll{
  height: 400rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  text-align: center;
}
.history-content{
  width: 400rpx;
  height: 360rpx;
  display: flex;
  flex-direction: column;
  margin-right: 20rpx;
  font-size: 30rpx;
}
.history-content image{
  width: 220rpx;
  height: 310rpx;
}

效果图

 纵向滚动

.wxml

<scroll-view class="recommend-scroll" scroll-y="true" scroll-top="string" enable-flex="true" bindscrolltolower="recommend">
   <block wx:for="{{recommend}}" wx:key="recommend">
      <view class="recommend-content">
        <image src="{{item.img}}"></image>
        <view class="recommend-desc">
         <view class="recommend-desc-name">{{item.name}}</view>
         <view class="recommend-desc-author">{{item.author}}</view>
         <view class="recommend-desc-score">☆☆☆☆☆ ({{item.score}})</view>
         <view class="recommend-desc-content">{{item.desc}}</view>
        </view>
      </view>
  </block>
</scroll-view>

.wxss

.recommend-scroll{
  display: flex;
  flex-direction: column;
  height: 600rpx;
  margin-top: 20rpx;
}

.recommend-content{
  display: flex;
  flex-direction: row;
  width: 700rpx;
  margin-top: 20rpx;
}

.recommend-content image{
  width:180rpx;
  height: 260rpx;
  border-radius: 20rpx;
}
.recommend-desc{
  width: 500rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
}
.recommend-desc-name{
  font-size: 40rpx;
  font-weight: 700;
}
.recommend-desc-author{
  font-size: 30rpx;
  margin-top: 10rpx;  
  color: gray;
}
.recommend-desc-score{
  font-size: 30rpx;
}
.recommend-desc-content{
  font-size: 28rpx;
  margin-top: 10rpx;
}

效果图

注意：其中的数据是个人请求的测试的数据和绑定，使用时将内容改动，这里只是样式