工做總結 vue 城會玩

用了vue2.0，vuex, vue-router等較新的技術，完成了城會玩這個項目，過程當中發現本身許多不足，也獲得不少人幫助，特別是有些困難的技術點。如今項目上線了，在此作一個整理和總結。

1.keep-alive的用法

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。和 <transition> 類似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出如今父組件鏈中。

當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。

主要用於保留組件狀態或避免從新渲染

2.v-html的用法，v-html能夠直接調用方法，能夠實現和過濾器同樣的效果，更靈活之處是能夠傳參。

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

3.根據給定的某個時間點，計算距離此刻還剩多長時間的計算方法

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 '報名已截止'
      }
    });

用moment.js這個庫，serverTime爲獲取服務器的時間。

4.Vuex的用法，能夠簡單許多：（好比upCityName）

// 初始化狀態管理模式
    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;
        }
      }
})

View Code

5.定義變量時，注意，能夠直接用data: {}，接受接口返回來的數據，其它數據要處理時，用處理器處理，這樣代碼會比較好維護。

6.接口返回時，作相應的容錯處理（包括接口好久不返回：斷開網絡的狀況）這點是最基本的前端開發人員應該具有的，慚愧，本身沒作好

7.虛擬鍵盤，fixed佈局在移動端的問題

在android端

這個輸入框會被遮住。

ios端表現得也不是很好，有時會懸空。

目前的處理辦法是：最外層div用position: relative佈局；裏面的這個框用position: absolute佈局。

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

主要是@touchstart和@focus作了下處理

　　　　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();
        },

8.廣告輪播圖問題

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)

①最外層的setTimeout(function(){}, 0)是爲了防止輪播圖滾動時出現白屏現象，這代碼看起來沒什麼用，不過加上這句就不會出現白屏現象，和swipe這個插件有關。

②disableTouch的設置是爲了防止出現一張圖的狀況下，還能拖動的現象；配合這個參數的設置，須要

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

由於disableTouch不會重置，加上上面的代碼，就能夠實現重置。

③ 輪播廣告只有兩張圖的時候要作特殊處理 if(self.swipe && self.event.length==2)

// 初始化廣告圖片列表
          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();
          });

9.div 內容寬度過大，左右移動的實現

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;
          //     }
          // });

        },

不事後面沒有用這個方法，直接讓其寬度能夠橫向滾動就能夠了^_^

---更新17-02-09---

廣告圖片自適應：

$(window).on('resize', function() {
              var ad = $(".m-swipe");
              ad.height( ad.width() / 3); // 廣告圖片比例自適應
            }).trigger('resize');