微信小程序开发，scroll-view实现商品列表水平/横向滑动

1. 官方文档

1.滚动视图（scroll-view）: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

2. 功能描述

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

注意事项：在实际开发中，设置横向滚动也要设置固定高度。
注意事项：在实际开发中，设置横向滚动也要设置固定高度。
注意事项：在实际开发中，设置横向滚动也要设置固定高度。

1. 横向滚动需打开 enable-flex 以兼容 WebView，如 ：

<scroll-view scroll-x enable-flex style="flex-direction: row;"/>

2. 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
3. 使用 worklet 函数需要开启开发者工具 “将 JS 编译成 ES5” 或 “编译 worklet 函数” 选项。

3.通用属性

属性	类型	默认值	必填	说明	最低版本
scroll-x	boolean	false	否	允许横向滚动	1.0.0
scroll-y	boolean	false	否	允许纵向滚动	1.0.0
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件	1.0.0
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件	1.0.0
scroll-top	number/string	-	否	设置垂直滚动条位置	1.0.0
scroll-left	number/string	-	否	设置水平滚动条位置	1.0.0
scroll-into-view	string	-	否	值为某子元素id(id不能以数字开头)。设置哪个方向可滚动，则在哪个方向滚动到该元素	1.0.0
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡	1.0.0
enable-back-to-top	boolean	false	否	iOS点击顶状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为false，则在显示尺寸大于屏幕90%时自动开启。	1.0.0
enable-passive	boolean	false	否	开启 passive 特性，能优化一定的滚动性能	2.25.3

查看更多属性，请阅读官方文档

4. 代码实现过程

1. index.wxml

<!-- 商品推荐区域 -->

  <view class="good-hot">
    <scroll-view scroll-x enable-flex class="scroll-view_H"  type ="list">

      <view>
        <view class="goods-item">
          <image src="http://t13.baidu.com/it/u=2921758692,2069247658&fm=224&app=112&f=JPEG?w=500&h=500" mode="aspectFill" />
          <text>优花33枝红玫瑰</text>
          <text>99</text>
        </view>
      </view>

      <view>
        <view class="goods-item">
          <image src="https://img2.baidu.com/it/u=3992667725,944662479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill" />
          <text>优花33枝红玫瑰</text>
          <text>99</text>
        </view>
      </view>

      <view>
        <view class="goods-item">
          <image src="https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" mode="aspectFill" />
          <text>优花33枝红玫瑰</text>
          <text>99</text>
        </view>
      </view>

      <view>
        <view class="goods-item">
          <image src="https://img0.baidu.com/it/u=321644153,4036133000&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" mode="aspectFill" />
          <text>优花33枝红玫瑰</text>
          <text>99</text>
        </view>
      </view>


      <view>
        <view class="goods-item">
          <image src="https://img1.baidu.com/it/u=2852404479,2009840107&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" mode="aspectFill" />
          <text>优花33枝红玫瑰</text>
          <text>99</text>
        </view>
      </view>

    </scroll-view>

  </view>

2. index.wxss

.good-hot {
  padding: 16rpx;
}

/* 注意点，测试下来，设置水平滑动也要给一个固定高度 */
.scroll-view_H {
  width: 100%;
  white-space: nowrap;
  height: 480rpx;
  flex-direction: row;
}

.scroll-view_H view {
  display: inline-block;
  width: 320rpx;
  height: 100%;
  margin-right: 16rpx;
  border-radius: 10rpx;
}

/* 去掉最后一个元素的 margin-right: 16rpx 设置为0 */
.scroll-view_H view:last-child {
  margin-right: 0;
}

.scroll-view_H .goods-item {
  display: flex;
  height: 100%;
  width: 320rpx;
  flex-direction: column;
}
.scroll-view_H .goods-item image {
  width: 100%;
  height: 380rpx;
  border-radius: 10rpx 10rpx 0 0;
}
.scroll-view_H .goods-item text {
  margin-top: 8rpx;
}

5. 运行效果图

6. 可能存在的问题

1. 官方说只有在竖向滚动时，需要给scroll-view一个固定高度，但在实际开发过程中，横向滚动也得给一个固定高度，可能是基础库版本问题

2. 模拟器中可能出现如下图的警告信息：

解决方案：在scroll-view标签中添加 type="list"，这个警告提示的很明显

7. 动态列表渲染

在上面.wxml布局中，商品列表是通过view堆积起来的，在实际开发中，肯定也不能这样写死，列表数据应该是一个动态的

使用列表渲染来实现数据动态显示

1. 官方文档

数据绑定：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
列表渲染： https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

2. 语法
   wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

示例：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    },
     {
      message: 'bar'
    }]
  }
})

3. 代码改造

index.wxml

   <view class="good-hot">
    <scroll-view scroll-x enable-flex class="scroll-view_H" type="list">
      <view wx:for="{{RecommendedProduct}}" wx:key="*this">
        <view class="goods-item">
          <image src="{{item.posterUrl}}" mode="aspectFill" />
          <text>{{item.title}}</text>
          <text>{{item.price}}</text>
        </view>
      </view>
    </scroll-view>
  </view>

在index.js中模拟动态列表数据

// index.js
Page({

  data: {
    //新品推荐数据
    RecommendedProduct: [
      { title: "优花33枝红玫瑰", posterUrl: "http://t13.baidu.com/it/u=2921758692,2069247658&fm=224&app=112&f=JPEG?w=500&h=500", price: "199" },
      { title: "优花33枝红玫瑰", posterUrl: "https://img2.baidu.com/it/u=3992667725,944662479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "69" },
      { title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300", price: "99" },
      { title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=321644153,4036133000&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", price: "89" },
      { title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=2852404479,2009840107&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", price: "49" },
      { title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1281911112,1084861743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "109" },
    ]
  }

})