移動端效果之ScrollList

**請看這裡：github

移動端效果之swiper

移動端效果之picker

移動端效果之cellswiper

移動端效果之indexlist


id='loadmore'
class="loadmore">
id="loadmorecontent"
class="loadmore-content">
class="page-loadmore-list"
id="loadmorelist">
ul>
div>
div>
div>這裡有一點需要注意，滑動內容部分需要乙個設定為overflow:scroll的容器，如果不設定，就會一直向上找，直到最後返回window，這點在下面的**可以體現
/**

* 獲取滾動容器
* @param  dom element 
* @return 
*/getscrolleventtarget: function
(element) 
currentnode = currentnode.parentnode;
}return window;
}

這兩點我們在touchmove事件中可以找到相應的**：

// 彈性滑動
// 這裡用手指滑動的位移除以比例係數來得出內容應該滑動的位移
// 因此這裡的內容滑動的位移一定是會小於手指滑動的位移的，除非你將系列設定為小於1，那我就沒得話說了
// 於是就造成了一種滑動又滑不動的感覺
var distance = (_this.currenty - _this.starty) / _this.config.distanceindex;
// 下移條件
// 1. 必須有重新整理函式
// 2. 方向為向下
// 3. 初始的scrolltop為0
// 4. 狀態不為載入中
if (typeof _this.config.topmethod === 'function' && _this.direction === 'down' &&
_this.getscrolltop(_this.scrolleventtarget) === 0 && _this.topstatus !== 'loading')  else 
if (_this.translate < 0) 
// 這裡是滑動中(touchmove)時應該判斷的
// 如果滑動的位移操作了我們設定的值就置為pull
// 同時更新狀態，改變內容的transform
// 同理可以在向上拉動的時候找到相應的**，這裡不作累述
_this.topstatus = _this.translate >= _this.config.topdistance ? 'drop' : 'pull';
event.trigger('topstatus', _this.topstatus);
event.trigger('translate', _this.translate);
}// 在向上滑動的過程中，還需要時刻檢測是否已經滑倒最下面了
// 如果沒有滑倒最下面，則正常滑動，否則，載入新的資料
if (_this.direction === 'up')

當狀態在loading的時候，就是載入資料的時候，而只有當滑動停止之後，狀態才需要置為loading，因此載入資料的**需要在touchend中執行，具體看下面**注釋：

// 這裡分析向下重新整理資料時候的**
// 向上部分的類似，可以自行去了解
if (_this.direction === 'down' && _this.getscrolltop(_this.scrolleventtarget) === 0 && _this.translate > 0) );
} else 
}

這裡與下拉重新整理有一點小小的不同，這裡貼一下**：

onbottomloaded: function
(list, isallloaded)  else 
event.trigger('translate', 0);
this.bottomallloaded = isallloaded;
}

在資料內容不足一屏時，如果設定了autofill欄位為true的話，會自動呼叫一遍bottommethod來填充資料

fillcontainer: function
()  else 
// 如果資料沒有填充滿容器，則載入資料
if (!this.containerfilled) );}}
},

最開始會認為這樣的效果實現起來會比較複雜（不過實際上確實也寫了快500到600行**了��），但是真正分析起來，其實覺得**還好，並沒有想像得辣麼困難。遇上自己想要實現的東西，就努力地去啃吧，就像遇到了你喜歡的女孩一樣��

移動端效果之swiper

最近在做移動端方面運用到了餓了麼的vue前端元件庫，因為不想單純用元件而使用它，故想深入了解一下實現原理。後續將會繼續研究一下其他的元件實現原理，有興趣的可以關注下。在這裡戳我父容器overflow hidden 子頁面transform translatex 100 width 100 由於所...

移動端效果之CellSwiper

看這裡 github 移動端效果之swiper 移動端效果之picker 移動端效果之indexlist 萌萌的卡洛奇我這個月要來看你啦 now標為未讀刪除中類名為your code的地方是你自己要加的做乙個效果之前，我們先需要分析一下我們應該怎麼做，這樣才能有的放矢。比如這個效果，由於採用...

移動端彈性效果

布局一定義頁面整體高度為100 然後使用 position absolute 布局可解決 header 彈性滾動區域 footer html,body wrap header,footer header footer main 布局二定義頁面整體高度為100 然後使用 display flex ...

移動端效果之ScrollList

移動端效果之swiper

移動端效果之CellSwiper

移動端彈性效果

相關推薦