微信小程序之scroll-view布局及bindscrolltolower事件不觸發的問題

布局問題

• 小程序中為了可滾動視圖區域要得使用scroll-view，但scroll-view有致命的缺陷，就是不支持flex布局。但我們可以通過使用scroll-view來包裹view的方法來使用flex布局.

scroll-view來包裹view的方法來使用flex布局

wxml部分

<scroll-view class="grid-container-e" scroll-y="true" bindscrolltolower="onScrollLower">
    <view class='grid-container'>
      <block wx:for="{{movies}}" wx:key="{{index}}">
        <template is="movie" data="{{...item}}" />
      </block>
    </view>
</scroll-view>

wxss部分

.grid-container-e {
  height: 1300rpx;
}
.grid-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 15rpx; 
} 

實現的效果

 

直接在scroll-view上設置flex

若不在scroll-view中的嵌套view，而是直接給scroll-view使用flex布局的效果如下，而且控制台會輸出警告。

實現的效果

控制台輸出

其他實現方式

使用float布局實現想要的結果，具體代碼如下

wxml部分

<scroll-view class="grid-container" scroll-y="true" bindscrolltolower="onScrollLower">
    <block wx:for="{{movies}}" wx:key="{{index}}">
      <view class="single-view-container">
        <template is="movie" data="{{...item}}" />
      </view>
    </block>
</scroll-view>

wxss部分

.single-view-container{
    float:left;
    margin-bottom: 40rpx;
    
}

.grid-container{
    height: 1300rpx;
    margin: 40rpx 0 40rpx 6rpx;
}

 

bindscrolltolower事件不觸發的問題

bindscrolltolower事件是滾動到底部/右邊時觸發，但是得給容器設置高度，否則事件不會被觸發。

解決方法

• 為這個scroll-view設置一個固定的高度，例如style=”height:1300rpx”,但是注意這個高度不能過大也不能過大，過小的話就沒法把scroll-view里面的視圖內容顯示完整。

 

---

 

每天進步一點點，不足之處請指出。