小程序模板網(wǎng)

微信小程序-scroll-view橫向滾動和上拉加載

發(fā)布時間:2017-12-02 17:03 所屬欄目:小程序開發(fā)教程

最近剛好在集中scroll-view的文章和跳坑指南;今天介紹微信小程序中scroll-view實現(xiàn)橫向滾動和上拉加載的實現(xiàn)及需要注意的地方。先看最終效果。橫向滾動1.設(shè)置滾動項display:i ...

 
 
 

最近剛好在集中scroll-view的文章和跳坑指南; 

今天介紹微信小程序中scroll-view實現(xiàn)橫向滾動和上拉加載的實現(xiàn)及需要注意的地方。 
先看最終效果。

 

橫向滾動

1.設(shè)置滾動項display:inline-block; 
2.設(shè)置滾動視圖容器white-space: nowrap; 
3.滾動項不要用float

為什么會有以上三點要求呢?

其實橫向滾動官方文檔中是沒有做太多說明的,只說明需要定義scroll-view滾動方向scroll-x=true允許橫向滾動,但是我在實踐的時候我發(fā)現(xiàn),你要橫向滾動,首先你得是一排吧。所以才發(fā)現(xiàn)需要定義滾動項及容器的一些屬性,浮動是不能讓所有的滾動項一排顯示的。

 

上拉加載

 

		
  1. <scroll-view scroll-y="true" bindscrolltolower="pullUpLoad" style="height: 58%;" class="content-wrap">

實現(xiàn)上拉加載,只需要綁定bindscrolltolower 事件處理,當(dāng)滾動到底部/左邊的時候,觸發(fā)這個處理函數(shù),邏輯上就是去請求下一頁的數(shù)據(jù),并且視圖上顯示正在加載的樣式,當(dāng)數(shù)據(jù)請求成功,將其拼合到之前的數(shù)據(jù)中,并隱藏正在加載的樣式。

 

		
  1. //下拉加載
  2. pullUpLoad: function(){
  3. var that = this;
  4. console.log("====下拉====")
  5. if (!that.data.hidden) {
  6. that.data.params.pageNo += 1;
  7. that.setData({
  8. params: that.data.params,
  9. })
  10. if(that.data.params.pageNo <= that.data.totalPages){
  11. that.setData({
  12. hidden: true,
  13. })
  14. that.getShareList();
  15. }else{
  16. that.setData({
  17. hidden: false,
  18. })
  19. }
  20. }
  21. }
 

如何設(shè)置scroll-view滿屏滾動

文檔中說到:使用豎向滾動時,需要給一個固定高度,通過 WXSS 設(shè)置 height。

那么我們想讓小程序滿屏滾動該如何設(shè)置高度呢,直接設(shè)置height:100%?好像不是很好用,原因是因為這個高度沒有參照物,以前我們是設(shè)置body的高度,類似,我們這里發(fā)現(xiàn)小程序頁面渲染出來的容器是Page,那我們就先設(shè)置Page的高度100%,再設(shè)置scroll-view高度100%,問題得到解決。

官方推薦的loading效果

 

		
  1. onLoad:function(options){
  2. wx.showToast({
  3. title: '加載中',
  4. icon: 'loading',
  5. duration: 10000//loading時間
  6. });
  7. //wx.hideToast();隱藏loading
  8. }


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18029.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢