Skip to content

Latest commit

 

History

History
134 lines (102 loc) · 4.4 KB

积分商城总结.md

File metadata and controls

134 lines (102 loc) · 4.4 KB

#积分商城总结

###1.背景

作为运营同学的一个有利手段，提高用户使用滴滴的频率，采用打车后赠送积分，用积分可以在积分商城兑换东西的策略

###2.开发阶段所遇到的问题与心得

一.布局方面：

  • 积分商城首页列表：可以解决有border，不知道宽度具体多少的事情

-webkit-box-sizing:border-box;
width: 50%;
border-right: 1px #e6e6e6 solid;

  • 用width:calc(100% - 20px) 安卓不兼容

  • 图片会模糊，某些浏览器使用-webkit-keyframes图片会模糊（eg:微信），native的不会模糊

-webkit-transform: rotate(-10deg);
@-webkit-keyframes draw {
        0% {
            -webkit-transform: scale(0.9);
        }
        5%,
        10% {
            -webkit-transform: scale(0.85) rotate(-10deg);
        }
        15%,
        25%,
        35%,
        45%,
        55%,
        65%,
        75%,
        85%,
        95% {
            -webkit-transform: scale(1) rotate(10deg);
        }
        20%,
        30%,
        40%,
        50%,
        60%,
        70%,
        80%,
        90% {
            -webkit-transform: scale(1) rotate(-10deg);
        }
        100% {
            -webkit-transform: scale(0.85) rotate(0);
        }
    }
  • 抽奖动画，做动画的次数 ， 安卓滴滴的app不支持，只能一个个的按照@-webkit-keyframes百分比硬写

-webkit-animation-iteration-count:25;

二.代码方面：

  • 穿透，解决办法，用click事件

  • 轮播，ev,preventDefalt() 阻止a

  • 标签默认的click事件，所以我的轮播上面每个图，用a链接会阻止，去掉ev,preventDefalt()后，在某些andrio手机，例如小米三上面，当touchmove的时候轮播会停下来，每move一次，才走一点，所以还需要ev.preventDefalt(),但是需要解决a链接，所以需要绑定事件，即取消默认方法后，再添加自己所需的事件

  • 兑换记录，不同样式，对应的数据，整理成自己所需的数据结构，添加进去

  • template对于文本有a标签带href链接的，这样的不支持，包括只有一句的a链接， template中即使用innerHTML也不行，还是老实的写js吧

var myHtml = '';
for (var i = 0; i < desLength; i++) {
	var str = "<div class='content'><p>" + desCont[i].title + "：</p><p>" + desCont[i].cont + "</p></div>";
	myHtml += str;
}
main.innerHTML = myHtml;


window.addEventListener('popstate', function(e){
	//可以监控到app点击返回那个按钮，处理一些有其他页面返回时的一些操作
},false);
  • 在IOS5，IOS6里面点击返回页面不会对页面刷新，但是可以触发popstate这个事件，将loading消失

window.addEventListener('popstate', function(ev) {
    dialogDetail.hide();
    dialog.hide();
}, false);

  • -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上，加这个属性禁止下载图片，eg.标签用a的时候，长时间按,会出现href的链接地址，可以复制 用a标签后，-webkit-user-select: auto;这个是默认的，在iphone上不起作用啦，需要用其他标签

  • arguments.callee();

var getLi = function(ele) {
        if (ele.className !== "list") {
            return arguments.callee(ele.parentNode); //当满足if条件的时候，继续执行这个if条件，直到不满足位置，有点像while(){}
        } else {
            return ele;
        }
    };
  • 防止用户复制券码的时候触发touchend

record.addEventListener("click", function(ev) {  },false);
  • 我的积分实时更新，需要提供积分的接口，只用输出到我的界面的积分，是做不到的

###三.其他： svn log shop-detail.html 查看版本号 mv shop-detail.html detail_clone.html 更改文件名字 svn export -r 34881 shop-detail.html 下载版本号为34881的代码 :set nonu 去掉编辑前面的数字

###四.后续 1.网页标点不在行首显，找到下面的css

word-break:break-all;

将这句话去掉，保存即可。利用这个方法也可以使摘要里的行首不显示标点。