工作总结 vue 城会玩

用了vue2.0，vuex, vue-router等较新的技术，完成了城会玩这个项目，过程中发现自己许多不足，也得到很多人帮助，特别是有些困难的技术点。现在项目上线了，在此做一个整理和总结。

<keep-alive>

<transition>

<keep-alive>

<keep-alive>

activated

deactivated

<span class="time-left" v-html="buyLeftTime(el.buy_end_time, serverTime)"></span>

Vue.filter('timeLeftFilter', function(time, serverTime) {
var date = moment.unix(time);
var difMin = date.diff(moment(serverTime), 'minutes');
if (difMin > 24*60) {
return '报名：剩' + date.diff(moment(serverTime), 'days') + '天';
} else if (difMin > 60) {
return '报名：剩' + date.diff(moment(serverTime), 'hours') + '小时';
} else if (difMin > 1) {
return '报名：剩' + difMin + '分钟';
} else {
return '报名已截止'
}
});

// 初始化状态管理模式
var store = new Vuex.Store({
state: {
left_time: '' ,// 报名剩余时间
person_data: {} , // 个人主页数据
share_data: {}, // 分享数据
tag_index: '0', // 分类标签的选中状态
cate_id: '', //分类ID
city_code: '', //当前选中城市
city_name: '',
},
mutations: {
upTagIndex: function(state, payload) {
state.tag_index = payload;
},
upLeftTime: function(state, payload) {
state.left_time = payload;
},
upPersonData: function(state, payload) {
state.person_data = payload;
},
upCateId: function(state, payload) {
state.cate_id = payload;
},
upCityCode: function(state, payload) {
state.city_code = payload;
},
upCityName: function(state, payload) {
state.city_name = payload;
}
}
})

<div class="say-something-wrap" @touchstart="start">

<div class="say-title">小伙伴说（{{total_comment}}）</div>
<div class="say-item clear" v-for="el in comments">
<a class="say-user-pic"><img :src="el.avatar || 'image/avatar_default.png'"></a>
<div class="say-user-info">{{el.nickname}}<span class="say-user-time">{{el.create_time|commentTimeFilter(serverTime)}}</span></div>
<div class="say-content" v-html="el.content"></div>
</div>

<div v-show="comments.length == 0" class="empty-bus">
<p class="m-elephant box"> 暂无留言</p>
</div>

<div class="foot-tip" v-show="comments.length > 0"><span class="border-left"></span><span v-show="!nomore">下拉加载更多</span><span v-show="nomore">已经到底啦</span><span class="border-right"></span></div>
</div>

<div class="comment-create clear">
<input id="comment-create-input" type="text" contenteditable="value" v-model="comment_content" placeholder="我来说两句" maxlength="150" @focus="focus"/>
<div class="m-square" @click="commentAdd()">发送</div>
</div>

　　　　focus: function(e){
//iOS第三方软键盘顶不上去的问题
if($(e.target)[0] && $(e.target)[0].scrollIntoView){
$(e.target)[0].scrollIntoView();
setTimeout(function(){
$(e.target)[0].scrollIntoView();
},50)
}
},
start: function(){
$('#comment-create-input').blur();
},

setTimeout(function(){
var elem = document.getElementById('bannerSwipe');
if(self.swipe){
self.swipe.kill();
}
self.swipe = Swipe(elem, {
startSlide: 0,
auto: self.event.length <= 1? 0:5000,
continuous: true,
disableTouch: self.event.length <= 1,
callback: function(index, elem) {
// 因缓存循环广告时特殊处理
index = index % self.event.length;
// 广告激活态
$('.m-swipe ul li').removeClass('m-swipe-active');
$('.m-swipe ul li:eq('+index+')').addClass('m-swipe-active');
}
});
},0)

if(self.swipe){
　　self.swipe.kill();
}

// 初始化广告图片列表
ddb.get('party/get_party_ad', { activity_city: city_id }, function(d) {
if (0 !== +d.ret) {
alert(d.msg);
return;
}
$(window).on('resize', function() {
var ad = $(".m-swipe");
ad.height( ad.width() / 3); // 广告图片比例自适应
}).trigger('resize');

if(self.swipe && self.event.length==2){
$('.m-swipe-wrap div').eq(2).remove();
$('.m-swipe-wrap div').eq(2).remove();
}
self.event = d.data.ad_list;
self.mySwipe();
});

moveCate: function() {
var mx = 0;
var move_time = 0;
// var move_distance = 1.44;
var move_distance = 1.94;
// var obj = document.getElementById("cate-tags");

// obj.addEventListener("touchstart",function(e) {
//     mx = e.touches[0].pageX;
// });
// obj.addEventListener("touchend",function(e) {
//     var tag_length = $('.tag-name').length;
//     max_move_time = tag_length - 3;
//     var _x=e.changedTouches[0].pageX;

//     if($('.cate-log-wrap').width() >= 768) { // 屏幕宽度大于768，则没有左右移动操作
//       return;
//     }

//     if(mx - _x > 10) { //右移动10个像素以上
//       if(move_time + 1 > max_move_time) {
//         return;
//       }
//       move_time ++;
//       obj.style.marginLeft = -( move_distance * move_time) + 'rem';
//     } else if(mx - _x < -10) { //左移动10个像素以上
//       if(move_time - 1 < 0 ) {
//         return;
//       }
//       move_time --;
//       obj.style.marginLeft = -( move_distance * move_time) + 'rem';
//     } else {
//       return;
//     }
// });

},

$(window).on('resize', function() {
var ad = $(".m-swipe");
ad.height( ad.width() / 3); // 广告图片比例自适应
}).trigger('resize');