1.效果:boss要在同一個頁面當中,通過左右滑動呈現出不同資料,並且資料是以列表的形式展示,並且可以通過下拉重新整理.

2.實現:

1. 左右滑動的功能可以通過swiper實現,並設定circular="{{true}}"
2. 每個頁面的list如果直接顯示在swiper-item裡面的話是無法下拉/上拉顯示資料的,所以需要在swiper-item裡面使用

   scroll-view並設定"scroll-y="{{true}}""

onPullDownRefresh:function(){
    //do something
}
 

但是現在啟用了scroll-view的話,是不會觸發onPullDownRefresh事件的,scroll-view有自己的頂部事件:bindscrolltoupper,但是該事件在效果上沒有事件onPullDownRefresh好看,並且需要往上拉一部分然後下拉才可以實現該事件,所有有沒有在使用scorll-view的同時使用onPullDownRefresh事件呢

答案當然是可以的,只需要在scoll-view中巢狀一個view,並將該view設定如下css樣式:

overflow:auto;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
 

我這裡只設置了基本的樣式,其他的樣式還需要根據自己的情況設定,比如長寬,背景

4.完整程式碼

1. wxml檔案:

<swiper style='height:100vh' bindchange="bindchange" circular="{{true}}">
    <swiper-item>
        <scroll-view scroll-y="{{true}}" style='height:100%'>
            <view class="list">
                <!-- 此處通過迴圈展示獲取的列表資料 -->
            </view>
        </scroll-view>
    </swiper-item>
</swiper>
 

.list {
  overflow:auto;
  margin:auto;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}