微信小程序之scroll-view

---

前言

该文章用于讲解微信小程序视图容器scroll-view横向滚动设置。

---

以下是本篇文章正文内容，下面案例可供参考

一、如何配置scroll-view？

使用Flex布局进行配置scroll-view，简单直观。

二、示例代码与解析

1.WXML

代码如下（示例）：

<scroll-view class="scroll-view_H" scroll-x>	  /*scroll-x为"true"允许横向滚动*/
  <view class="scroll-view-box_H">				  /*列表渲染*/
    <block wx:for="{{daohang}}" wx:key="index">
      <view class="scroll-view-item_H">{{item.name}}</view>
    </block>
  </view>
</scroll-view>  

2.WXSS

代码如下（示例）：

.scroll-view-box_H {
  display: flex;  			/*采用Flex布局*/
}

.scroll-view-item_H {
  width: 82px;				/*设置scroll-view-item宽高*/
  height: 41px;
  line-height: 41px;		/*文本居中对齐*/
  text-align: center;		
  flex-shrink: 0;        	/*空间不足时，项目不进行压缩*/
}

3.JAVASCRIPT

代码如下（示例）：

Page({
  data: {
    daohang: [
      {name: "热点"},
      {name: "关注"},
      {name: "北京"},
      {name: "生活"},
      {name: "娱乐"},
      {name: "居家"},
      {name: "体育"},
      {name: "健康"},
      {name: "宠物"},
      {name: "科技"},
      {name: "互联网"},
      {name: "嵌入式"},
      {name: "java"}
    ]
  }
})

---

总结

Flex布局默认不换行，如果项目多了，空间不足时项目会进行压缩。设置项目属性flex-shrink: 0；即使空间不足时项目也不进行压缩，scroll-view配置就完成了。