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%;

产品的需求是：层可滑动切换，当滑到上面，我的提问那行要附在头部。写了一天，没调好这个效果，不得已跟产品沟通，改了需求，做了两个入口，点击分别进入新的页面。

自己做不到那种效果，导致产品变得不好，心里很不舒服，难过的都哭了，哎，好伤心。

突然想起来忘记了两个更多按钮，总结也写得差不多了，赶紧去加上按钮去！