wap問答系統工做總結

一直想找個鍛鍊本身的機會，可是又很恐慌，怕本身能力太差，把握不住機會，把事情弄糟。

終於，要作wap問答系統了，原本說是幾我的一起作，我分析了下頁面，發現共同的部分仍是比較多的，有點想法，要不我接過來作作，看佈局不是很難，但本身也沒有很大把握，一直在猶豫，糾結。

終於鼓起勇氣，提出我來作，雖然底氣不足，但我仍是說出來了。產品讓我估時間，瞬間有點慌，幾乎沒作過什麼項目，作的頁面也很少，我實在不知道本身多長時間能完成。我支支吾吾的，大概着想6天？頁面又有些重複，要不5天，再加點緊，4天？因而，很沒底氣的跟產品說，四五天吧~「怎麼可能？最多到下週一！」產品的一句話把我驚到了。當時是週三下午4點多，算起來也就3天多一點吧。我咬咬牙:「行！交給我吧！實在作不完，我就加班。」可能我堅定的態度有點反常，產品驚訝了！

這些頁面，看起來不難，不少佈局都同樣，可我卻花了很多時間，走了很多彎路。

這裏有幾個層切換，我就想模仿以前同事寫的，寫層滑動的效果。 給外部層設置400%的寬度，overflow:hidden，裏面每一個層25%，當點擊分類的時候，使用translateX來滑動外部層。這個效果寫了很長時間，很費勁，寫不出來的時候，我居然徹底把別人的div佈局和css樣式copy過來，這種作法很很差，本身不懂這樣作的原理，copy的時候很盲目，之後儘可能少copy，不過這樣作以後，也算學會了這個佈局。當寫完這個效果的時候，居然還沾沾自喜。哈哈~立刻，我就發現了問題，這個數據列表是須要下拉刷新，上拉加載效果的！我以前寫的佈局徹底不能用了~花了我那麼長時間，抓狂啊！

我歷來沒寫過下拉刷新，上拉加載效果，這個需求也着實折磨了我一番。我選擇用mui來寫這個效果。查看mui官方文檔，借鑑同事寫過的頁面， 先初始化mui的pullrefresh,而後再調用、傳參，拼拼湊湊，大概寫出了這個效果。可是，當切換層的時候，該怎麼處理呢？折騰了半天，我明白了，這個層切換不能用多個div的切換， 下拉刷新，上拉加載須要在一個層裏，當切換層，要從新請求數據，清空mui-table-view，從新append數據。可是還有個問題，就是當切換層的時候，怎麼觸發mui下拉刷新重新請求數據。在官方文檔裏找了半天，仍是沒有解決這個問題。搞了一天，也是醉了~最後百度這個問題，垂手可得找到了答案， 如何觸發下拉刷新事件的代碼是：mui('.box').pullRefresh().pulldownLoading();mui的文檔好弱啊！超級很差用！看來你們寫的blog仍是很好的，哈哈！光這個層切換觸發mui刷新又折騰了一天(此時已經週六過去了)。

首頁面還有一個橫向滑動，在mui下拉刷新的容器裏，以前寫的普通的左右拖動層效果失效了。想着還用mui吧，百度了不少，終於找到了關鍵字「區域滾動-橫向滾動」，看官方文檔，加了些樣式，並不起做用~又在blog裏找到了答案， 初始化scroll事件，以下。還要注意這段代碼的位置， 要放在下拉刷新調用的後面，具體緣由不明~慚愧啊！

//橫向滑動初始化
mui($('.course-wrap')).scroll({
scrollX: true,
scrollY: false,
indicators: true,
deceleration: 0.0005 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越 小，默認值0.0006
});

 

到此爲止，首頁和列表頁基本完成，他倆佈局差很少。mui的坑踩的不少也很深，每次都是好長時間才能爬出來，弄mui我都崩潰了，好在，最後解決了。

在寫這個頁面的時候， 頭像下的背景圖要填滿div，要設置background-size:100%;這句代碼只是讓背景圖100%填滿寬，還要注意高是否填滿，正確的應該爲background-size:100% 100%;

產品的需求是：層可滑動切換，當滑到上面，個人提問那行要附在頭部。寫了一天，沒調好這個效果，不得已跟產品溝通，改了需求，作了兩個入口，點擊分別進入新的頁面。

本身作不到那種效果，致使產品變得很差，內心很不舒服，難過的都哭了，哎，好傷心。

忽然想起來忘記了兩個更多按鈕，總結也寫得差很少了，趕忙去加上按鈕去！