一直想找個(gè)鍛煉自己的機(jī)會(huì)，但是又很恐慌，怕自己能力太差，把握不住機(jī)會(huì)，把事情弄糟。

終于，要做wap問(wèn)答系統(tǒng)了，本來(lái)說(shuō)是幾個(gè)人一塊兒做，我分析了下頁(yè)面，發(fā)現(xiàn)共同的部分還是比較多的，有點(diǎn)想法，要不我接過(guò)來(lái)做做，看布局不是很難，但自己也沒(méi)有很大把握，一直在猶豫，糾結(jié)。

終于鼓起勇氣，提出我來(lái)做，雖然底氣不足，但我還是說(shuō)出來(lái)了。產(chǎn)品讓我估時(shí)間，瞬間有點(diǎn)慌，幾乎沒(méi)做過(guò)什么項(xiàng)目，做的頁(yè)面也不多，我實(shí)在不知道自己多長(zhǎng)時(shí)間能完成。我支支吾吾的，大概著想6天？頁(yè)面又有些重復(fù)，要不5天，再加點(diǎn)緊，4天？于是，很沒(méi)底氣的跟產(chǎn)品說(shuō)，四五天吧~“怎么可能？最多到下周一！”產(chǎn)品的一句話把我驚到了。當(dāng)時(shí)是周三下午4點(diǎn)多，算起來(lái)也就3天多一點(diǎn)吧。我咬咬牙:“行！交給我吧！實(shí)在做不完，我就加班?！笨赡芪覉?jiān)決的態(tài)度有點(diǎn)反常，產(chǎn)品驚訝了！

這些頁(yè)面，看起來(lái)不難，很多布局都一樣，可我卻花了不少時(shí)間，走了不少?gòu)澛贰?/p>

平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),游戲開(kāi)發(fā),動(dòng)畫(huà)培訓(xùn)

這里有幾個(gè)層切換，我就想模仿之前同事寫(xiě)的，寫(xiě)層滑動(dòng)的效果。給外部層設(shè)置400%的寬度，overflow:hidden，里面每個(gè)層25%，當(dāng)點(diǎn)擊分類的時(shí)候，使用translateX來(lái)滑動(dòng)外部層。這個(gè)效果寫(xiě)了很長(zhǎng)時(shí)間，很費(fèi)勁，寫(xiě)不出來(lái)的時(shí)候，我竟然完全把別人的div布局和css樣式copy過(guò)來(lái)，這種做法很不好，自己不懂這樣做的原理，copy的時(shí)候很盲目，以后盡量少copy，不過(guò)這樣做之后，也算學(xué)會(huì)了這個(gè)布局。當(dāng)寫(xiě)完這個(gè)效果的時(shí)候，竟然還沾沾自喜。哈哈~馬上，我就發(fā)現(xiàn)了問(wèn)題，這個(gè)數(shù)據(jù)列表是需要下拉刷新，上拉加載效果的！我之前寫(xiě)的布局完全不能用了~花了我那么長(zhǎng)時(shí)間，抓狂啊！

我從來(lái)沒(méi)寫(xiě)過(guò)下拉刷新，上拉加載效果，這個(gè)需求也著實(shí)折磨了我一番。我選擇用mui來(lái)寫(xiě)這個(gè)效果。查看mui官方文檔，借鑒同事寫(xiě)過(guò)的頁(yè)面，先初始化mui的pullrefresh,然后再調(diào)用、傳參，拼拼湊湊，大概寫(xiě)出了這個(gè)效果。但是，當(dāng)切換層的時(shí)候，該怎么處理呢？折騰了半天，我明白了，這個(gè)層切換不能用多個(gè)div的切換，下拉刷新，上拉加載需要在一個(gè)層里，當(dāng)切換層，要重新請(qǐng)求數(shù)據(jù)，清空mui-table-view，重新append數(shù)據(jù)。但是還有個(gè)問(wèn)題，就是當(dāng)切換層的時(shí)候，怎么觸發(fā)mui下拉刷新從新請(qǐng)求數(shù)據(jù)。在官方文檔里找了半天，還是沒(méi)有解決這個(gè)問(wèn)題。搞了一天，也是醉了~最后百度這個(gè)問(wèn)題，輕而易舉找到了答案，如何觸發(fā)下拉刷新事件的代碼是：mui('.box').pullRefresh().pulldownLoading();mui的文檔好弱啊！超級(jí)不好用！看來(lái)大家寫(xiě)的blog還是很好的，哈哈！光這個(gè)層切換觸發(fā)mui刷新又折騰了一天(此時(shí)已經(jīng)周六過(guò)去了)。

平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),游戲開(kāi)發(fā),動(dòng)畫(huà)培訓(xùn)

首頁(yè)面還有一個(gè)橫向滑動(dòng)，在mui下拉刷新的容器里，之前寫(xiě)的普通的左右拖動(dòng)層效果失效了。想著還用mui吧，百度了很多，終于找到了關(guān)鍵字“區(qū)域滾動(dòng)-橫向滾動(dòng)”，看官方文檔，加了些樣式，并不起作用~又在blog里找到了答案，初始化scroll事件，如下。還要注意這段代碼的位置，要放在下拉刷新調(diào)用的后面，具體原因不明~慚愧?。?/p>

平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),游戲開(kāi)發(fā),動(dòng)畫(huà)培訓(xùn)

//橫向滑動(dòng)初始化mui($('.course-wrap')).scroll({
scrollX: true,
scrollY: false,
indicators: true,
de