小程序水平滚动条的实现

最新在做小程序的项目，然后需要使用到水平滚动条，然后看了官方的文档，实在是简单到不行，使用就可以捣鼓着写一个水平滚动的组件，现在有时候，记录一下，方便日后查阅。

水平滚动的原理

• 怎样可以水平滚动呢？小程序有没有提供有什么可以水平滚动的组件呢？
• 怎样把元素水平排列呢？

怎么实现水平滚动

解决的方法如下：

1. 小程序提供了一个scroll-view 的组件，可滚动试图的区域，设置 scroll-x 可以设置横向滚动，并且设置不换行，使用的是 white-space: nowrap;
2. 可以设置 display: inline-block ，把元素设置成水平排列。

具体代码怎么实现水平滚动

现在这两个问题的思路已清晰，接下来就是具体代码实现。

<!-- HTML的代码 -->
<scroll-view class='wrapper' scroll-x="true">
  <view class='horizontal-scroll' wx:for="{{dataList}}" wx:key="{{index}}">
    <text>{{item.name}}</text>
  </view>
</scroll-view>

css样式：

.wrapper {
  width: 100%;
  white-space: nowrap;
  display: flex;
}
.horizontal-scroll {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: green;
  margin-right: 40rpx;
  display: inline-block;
  text-align: center;
}
.horizontal-scroll text {
  font-size: 28rpx;
  color: #fff;
  text-align: center;
}

JS 部分：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList:[
      {
        name: '贾宝玉'
      },
      {
        name: '林黛玉'
      },
      {
        name: '薛宝钗'
      },
      {
        name: '贾元春'
      },
      {
        name: '贾迎春'
      },
      {
        name: '贾探春'
      },
      {
        name: '贾惜春'
      }
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.dataList;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

最终的实现的效果