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

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

本身作不到那种效果，致使产品变得很差，内心很不舒服，难过的都哭了，哎，好伤心。

忽然想起来忘记了两个更多按钮，总结也写得差很少了，赶忙去加上按钮去！