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

来源:互联网 发布:易语言mp3播放器源码 编辑:程序博客网 时间:2024/06/14 00:51

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

在微信小程序的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>