1. 程式人生 > >關於微信小程式的scroll-view的使用

關於微信小程式的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>