關於微信小程式的scroll-view的使用
阿新 • • 發佈:2019-02-19
(上下推動的程式碼是沒有問題的 只是左右有問題) 希望能給初學者一些指導
在微信小程式的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>