微信小程序scroll-view左右滚动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38023551/article/details/80655087

官方只有一个HTML的代码演示，而css没有；
自己根据官方的HTML代码，尝试几个方案，都GG了；最后实现成功；
因为需要用到scroll-top的特性；所以还是乖乖的去尝试吧

<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
  <view id="green" class="scroll-view-item_H bc_green"></view>
  <view id="red" class="scroll-view-item_H bc_red"></view>
  <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
  <view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>

首先说一下哪些不能用

1.在子元素上设置float；无效果

---

2.父元素上设置 display: flex; 同时在设置子元素上 display: inline-block; 无效果

---

成功的办法：

.scroll-view_H {
  width: 100%;
  white-space: nowrap;
}

.scroll-view-item_H {
  width: 200px;
  height: 100px;
  display: inline-block;
}

点击按钮，自动移动到相应的元素

<scroll-view class="scroll-view_H" scroll-x scroll-into-view="{{toView}}" scroll-with-animation >
  <view id="green1" class="scroll-view-item_H bc_green"></view>
  <view id="red1" class="scroll-view-item_H bc_red"></view>
  <view id="yellow1" class="scroll-view-item_H bc_yellow"></view>
  <view id="blue1" class="scroll-view-item_H bc_blue"></view>
</scroll-view> 

<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapTips">blue1</button>

这里注意id不能为数字开头，但是可以拼接数字

const order = ['red1', 'yellow1', 'blue1', 'green1', 'red1']

 tap: function (e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        console.log(order[i + 1])
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapTips(){
    this.setData({
      toView: "blue1"
    })
  },