一期项目总结

详情页

  • 多状态拿取，分清状态权重 
    + 平级请求数据
    - dataHandle.getUserData() -->
          // 判断是否已申请
          dataHandle.isApply() ---> 拿status
            // 查询试用详情
            dataHandle.findIdData(status) --> 渲染数据
    // 获取任务
    - dataHandle.getTaskData();
+   轮播问题
    - 渲染轮播状态 --- swiper.js ---- 容器数据 必须是不能为display: none;
       - 解决方案：设置visibility: hidden; 先占位 --- 数据来了在显示
    -  做文本显示时候，要考虑大屏幕手机、小屏幕手机 容器宽度问题
            - 显示一行的时候，单行文本溢出...
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            
            - 多行文本溢出
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
                -webkit-line-clamp: 5; /* 显示的行数 */
                overflow: hidden;  /* 隐藏超出的内容 */

            - 富文本样式控制
                包裹容器 设置 position: relative; 防止富文本内容有定位
                section {
                    max-width: 100%;//注意和width: 100%;是有很大区别的
                }
                img: {
                    max-width: 100%;
                }
                p {
                    max-width: 100%;
                    word-break: break-word; // 控制文本换行
                }

               - 对于价格样式 ￥00.00 -- 只需要设置.前面的0的字体变大，行高便是以大得为基准
               - 对通过 padding 来设置背景图时，一定要留宽度跟图片一样的情况
![1.png](http://upload-images.jianshu.io/upload_images/1518769-d2e5bd289936a3fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如上图，原价和限量部分是百分比控制,右边原来我也是设置`width:33.33%`和`text-align:right`.发现已有部分左边距太大.最后解决方案，已有部分严格控制左边`padding-left`值,向右浮动，`max-width: 37%`;

   +  评分星星

<div class="user-star fleft">
{{if record.comment.score == 5}}
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
{{else if record.comment.score == 4}}
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
{{else if record.comment.score == 3}}
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
{{else if record.comment.score == 2}}
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
{{else if record.comment.score == 1}}
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star1.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
{{else if record.comment.score == 0}}
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
<img class="star-item j-star fleft" src="<%=static_resource_prefix%>/image/mobile/all/star2.png">
{{/if}}
</div>

我竟然写了上面如此无脑的代码,再看下另一种解决方案

<div class="user-star fright">
<span class="star-item j-star fleft {{record.comment.score>=1?'star-on':''}}"></span>
<span class="star-item j-star fleft {{record.comment.score>=2?'star-on':''}}"></span>
<span class="star-item j-star fleft {{record.comment.score>=3?'star-on':''}}"></span>
<span class="star-item j-star fleft {{record.comment.score>=4?'star-on':''}}"></span>
<span class="star-item j-star fleft {{record.comment.score>=5?'star-on':''}}"></span>
</div>

+ 这种方案是定义了两个类,分5个，根据个数来控制 星星显示个数

    +  之前一直怕 用`::after/::before`，以后放心大胆用，先留好改动的余地
     +  上传图片值做好 `width：100%`，不限制高度，不然会图片拉伸
     +  加载动画的逻辑判断一定要明确，在加载数据之前就显示加载动画，回调数据来了之后就关闭加载动画;在数据没有完全加载成功时，先将容器隐藏，数据加载完成后再显示，此处用了轮播插件，`display：none`时会无法拿取dom节点，最终解决办法，设置`visibility:hidden`,这个很重要，也可以全局都设置`visibility:hidden`;
     +  手机端屏幕按钮放大，注意放大点击区域
     +   5.  flex布局
  - 事件注册
  事件注册--深入学习
  - 标记变量-全局
  用状态变量来控制事件内容执行还是不执行,少用on(),off()来接触事件

  - Fiddler 连接手机端页面 测试数据拿取
  手机跟电脑接入同一个网段，ipconfig，查到ip，手机端网络长按，修改网络，启用代理，监听网络请求

### 一定要提前布局，提前想好怎么分模块,模块化思想
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,009评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,808评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,891评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,283评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,285评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,409评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,809评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,487评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,680评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,268评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,815评论 3赞 304
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2赞 341

推荐阅读更多精彩内容

  • 广场舞随拍
    这几天的桂林中心广场又热闹了，桂林日报社和体育局在中心广场举办万人广场健身舞大赛，今天开赛。参加比赛的队伍很多，参...
    五根鱼阅读 310评论 0赞 0
  • 疯一样的男子（一）
    很多年来，我都没有吃早饭的习惯，所以我一直奇怪，路边上那个面摊是何以维持了这么多年。每次我路过那里，老板娘就是抱着...
    金刚煮粥阅读 310评论 0赞 1
  • 2016年6月2日
    1、拆完B类 2、写完两个G 3、搞定normal distribution 4、python过一遍 5、日常阅读...
    你务必坚强自信阳光有力量阅读 110评论 0赞 0