scroll-view实现不了滑动效果

版权声明：咔咔 来自https://blog.csdn.net/fangkang7 https://blog.csdn.net/fangkang7/article/details/82383884

当使用scroll-view这个标签的时候，我们是为了实现向左滑或者向下滑的效果。

你只需要将我的案例复制到你的项目，将图片路径修改完之后，就可以看到效果，切记是下面那一份代码呦！css也在一起

一下是我的案例：

在刚开始的时候就是这样写的，但是一直都不可以出现滑动效果，于是果断换思路。就有了下面的这样的布局

      
        <scroll-view class='cover' scrollX="true">
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
        </scroll-view>

修改过后的布局：

<view class="scroll_box">
      
        <scroll-view class='cover' scrollX="true">
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
        </scroll-view>
      </view>

.cover{
  height: 100rpx;
}

.scroll_box{
width: 84%;
overflow: hidden;
background: #fff;
white-space: nowrap;
margin: 0 auto;
}
/*封面的样式  */
.cover image{
  width: 150rpx;
  height: 130rpx;
  margin-right: 20rpx;
}
.cover view{
  display:inline-block;
}