2.【已解决】小程序scroll-view横向滑动无效果

场景

在用小程序scroll-view进行横向滑动,发现无效果。原来是自己html网页开发知识欠缺。

解决方案

要想小程序scroll-view进行横向滑动,需要满足以下3个条件:
1.scroll-view设置scroll-x属性,表示告诉scroll-view进行横向滑动。例如:



  A
  B
  C
  D


2.scroll-view的样式中要有个设置white-space:nowrap;。例如:

.scroll-horizontal{
  width: 100%;
  height: 200px;
  background-color: #c7f0c5;
  white-space:nowrap;
}

3.凡是scroll-view内部要滑动的组件,样式中都要有设置display: inline-block;.例如:

.scroll-horizontal-item-blue{
  width: 100%;
  height: 200px;
  background-color: blue;
  display: inline-block;
}
.scroll-horizontal-item-red{
width: 100%;
  height: 200px;
  background-color: red;
  display: inline-block;
  
}

.scroll-horizontal-item-green{
  width: 100%;
  height: 200px;
  background-color: green;
  display: inline-block;
}

.scroll-horizontal-item-orange{
  width: 100%;
  height: 200px;
  background-color: orange;
  display: inline-block;
}

经过以上3个设置,就可以横向滑动了。


小程序scroll-view横向滑动

你可能感兴趣的:(2.【已解决】小程序scroll-view横向滑动无效果)