小程序横向（竖向）滑屏功能实现

效果图：亲测，直接 c，v

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

实现滑屏的组件是：scroll-view

特别注意：想要改成竖屏的就是改下scroll-y就可以

上代码：

wxml：

<!------------- -----------滑屏布局---------------------------- -->
<scroll-view scroll-x="true" class='recommend' enable-flex="true" > 
  <block wx:for='{{recommends.img}}' wx:key='' scroll-x="true" > 
    <view class="recommend-item" bindtap="xiangqing" data-index="{{index}}">
      <image class="img"  src='{{item}}'  ></image>
      <view >{{recommends.title[index]}} </view>
    </view>               
  </block> 
</scroll-view>

js：数据都是网上抓取的 ，大家可以不用改

  /**
   * 页面的初始数据
   */
  data: {
 
    recommends:{
      img:[
        'https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20191204/5efa0612b5b9ea7bff1bf7b0cbabb7e0.png',
        'https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20190916/52bfc12014f8669ab9336d468552423f.png',
        'https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20181107/5a8098a6500a0c88f9674f95d7103209.png',
        'https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20191112/819a87b4fcb6332ba557182b2cdefb64.png',
        'https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20190522/0ac0836cc4cfa3a50711da936e949d8a.png',
        'https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20191128/6e4b62f8127bfae6b32a16372c8b1b5c.png',
        'https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20190917/0c0289cf61726958960da02524255dcd.png',
        'https://shopstatic.vivo.com.cn/vivoshop/commodity/31/10131_1559031066027_750x750.png.webp'
      ],
      title:[
        'iQOO 专区',
        'NEX系列',
        'X系列',
        'S系列',
        'Z 系列',
        'Y 系列',
        'U 系列',
        '真无线耳机'
      ]
    }
  },

wxss：

/******************滑屏样式  *******************/
.recommend {
  display: flex;
  margin-top: 40rpx;
  /* padding-bottom: 0rpx;
  border-bottom: 10rpx solid #eee; */
  
}

.recommend-item {
  flex: 1;
  text-align: center;
}

.recommend-item image {
  width: 160rpx;
  height: 160rpx;
}

.recommend-item view {
  font-size: 30rpx;
  color: #555;
  margin-top: 10rpx;
}