一直想找个锻炼自己的机会,但是又很恐慌,怕自己能力太差,把握不住机会,把事情弄糟。
终于,要做wap问答系统了,本来说是几个人一块儿做,我分析了下页面,发现共同的部分还是比较多的,有点想法,要不我接过来做做,看布局不是很难,但自己也没有很大把握,一直在犹豫,纠结。
终于鼓起勇气,提出我来做,虽然底气不足,但我还是说出来了。产品让我估时间,瞬间有点慌,几乎没做过什么项目,做的页面也不多,我实在不知道自己多长时间能完成。我支支吾吾的,大概着想6天?页面又有些重复,要不5天,再加点紧,4天?于是,很没底气的跟产品说,四五天吧~“怎么可能?最多到下周一!”产品的一句话把我惊到了。当时是周三下午4点多,算起来也就3天多一点吧。我咬咬牙:“行!交给我吧!实在做不完,我就加班。”可能我坚决的态度有点反常,产品惊讶了!
这些页面,看起来不难,很多布局都一样,可我却花了不少时间,走了不少弯路。
![](https://i-blog.csdnimg.cn/blog_migrate/683f027c3668982a19076ffe4501ed6b.png)
这里有几个层切换,我就想模仿之前同事写的,写层滑动的效果。给外部层设置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刷新又折腾了一天(此时已经周六过去了)。
![](https://i-blog.csdnimg.cn/blog_migrate/74a4b2a412d23dda6e9821abb7f30a4e.png)
首页面还有一个横向滑动,在mui下拉刷新的容器里,之前写的普通的左右拖动层效果失效了。想着还用mui吧,百度了很多,终于找到了关键字“区域滚动-横向滚动”,看官方文档,加了些样式,并不起作用~又在blog里找到了答案,初始化scroll事件,如下。还要注意这段代码的位置,要放在下拉刷新调用的后面,具体原因不明~惭愧啊!
//横向滑动初始化 mui($('.course-wrap')).scroll({ scrollX: true, scrollY: false, indicators: true, deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越 小,默认值0.0006 });
到此为止,首页和列表页基本完成,他俩布局差不多。mui的坑踩的很多也很深,每次都是好长时间才能爬出来,弄mui我都崩溃了,好在,最后解决了。
![](https://i-blog.csdnimg.cn/blog_migrate/4c09c206535d33f79ab2a9366a32fe8d.png)
在写这个页面的时候,头像下的背景图要填满div,要设置background-size:100%;这句代码只是让背景图100%填满宽,还要注意高是否填满,正确的应该为background-size:100% 100%;
产品的需求是:层可滑动切换,当滑到上面,我的提问那行要附在头部。写了一天,没调好这个效果,不得已跟产品沟通,改了需求,做了两个入口,点击分别进入新的页面。
![](https://i-blog.csdnimg.cn/blog_migrate/5d2d2653229725d13a910e4ac3ce8f61.png)
自己做不到那种效果,导致产品变得不好,心里很不舒服,难过的都哭了,哎,好伤心。
突然想起来忘记了两个更多按钮,总结也写得差不多了,赶紧去加上按钮去!