关于微信小程序的scroll-view的使用

(上下推动的代码是没有问题的 只是左右有问题)  希望能给初学者一些指导

在微信小程序的scroll-view的使用中 笔者发现一个问题  就是在Y轴上下的拖动的时候 只改变scroll-y  为scroll-x仅仅是不够的 scroll-还要比scroll-y再多上一个<view></view>的组件(这个放在scroll-view的下面 要不无法实现左右的移动 而且只会里面的子页面只会出现一个 也不是重叠)将子页面放在里面

 

 

下面第一个程序是笔者之前的错误代码  

<view class="top-z">
  <view>
    <text>scroll-H</text>
      <scroll-view scroll-y class="scorll-y-heigt">
        <view class="scorll-y-1"></view>
        <view class="scorll-y-2"></view>
        <view class="scorll-y-3"></view>
      </scroll-view>
    </view>

  <view>
    <text>scroll-X</text>
      <scroll-view scroll-x  class="scorll-x-width">
           <view class="scorll-x-1"></view>
           <view class="scorll-x-2"></view>
           <view class="scorll-x-3"></view>
      </scroll-view>
  </view>

</view>

 

 

 

 

 

 

下面的是笔者上传正确的可以左右拖动的代码

 

<view class="top-z">
  <view>
    <text>scroll-H</text>
      <scroll-view scroll-y class="scorll-y-heigt">
        <view class="scorll-y-1"></view>
        <view class="scorll-y-2"></view>
        <view class="scorll-y-3"></view>
      </scroll-view>
    </view>

  <view>
    <text>scroll-X</text>
      <scroll-view scroll-x  style="width:100%">
        <view class="scorll-x-width">
           <view class="scorll-x-1"></view>
           <view class="scorll-x-2"></view>
           <view class="scorll-x-3"></view>
      </view>
      </scroll-view>
  </view>

</view>

相比之下 差别在于笔者在文章开头的提到的 在下面代码里添加一个<view></view>  在这里定义这个的高度与左右  在往这个里面添加 相应的<view></view>

<scroll-view scroll-x  style="width:100%">

</scroll-view>