一直想找個鍛鍊自己的機會，但是又很恐慌，怕自己能力太差，把握不住機會，把事情弄糟。
終於，要做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%;
產品的需求是：層可滑動切換，當滑到上面，我的提問那行要附在頭部。寫了一天，沒調好這個效果，不得已跟產品溝通，改了需求，做了兩個入口，點擊分別進入新的頁面。
自己做不到那種效果，導致產品變得不好，心裏很不舒服，難過的都哭了，哎，好傷心。
突然想起來忘記了兩個更多按鈕，總結也寫得差不多了，趕緊去加上按鈕去！