欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)新聞?wù)故卷摰牟襟E詳解

 更新時(shí)間:2019年04月11日 09:05:26   作者:獨(dú)醉莫邪  
最近小編遇到這樣的需求,要實(shí)現(xiàn)一個(gè)新聞?wù)故卷摴δ?,剛接到這樣的需求還真是一頭霧水,不知從哪入手,今天小編通過實(shí)例代碼給大家介紹下vue實(shí)現(xiàn)新聞?wù)故卷摰牟襟E詳解,感興趣的朋友跟隨小編一起看看吧

需求

1.  做一個(gè)新聞?wù)故卷?br /> 2.  新聞分類可以自定義
3.  每類新聞的內(nèi)容,樣式不一樣
4.  上拉加載新的數(shù)據(jù)
5.  點(diǎn)擊進(jìn)入詳情頁,再返回時(shí),定位到原來的位置

圖片展示

 

 

 

采用的技術(shù)

輪播圖使用:swiper
    zepto.js
    vue.js
    vue.resource.js
    vue-router.js
滑動(dòng)插件:iscroll.js
界面樣式采用的   weui

設(shè)計(jì)的思路

因?yàn)槭褂昧藇ue.js  每個(gè)分類的樣式不一樣,而且分類是可以配置的。所以呢,想到了單頁面應(yīng)用,所以選擇了vue-router.js的路由。也使用了vue.resource 插件用來做數(shù)據(jù)傳輸。

因?yàn)槲冶容^菜,所以呢還是使用的原始的引入方式,沒有使用webpack之類的打包工具,就最原始的js 寫法。

難點(diǎn)

使用了路由,是為了返回的時(shí)候,可以回到剛才離開的地方,vue雖然有自帶的keep-alive  但是似乎必須使用路由的history模式,還要修改服務(wù)器端的東西,所以感覺不是很合適。而且我們需要Ajax加載數(shù)據(jù),怎樣能返回路由的時(shí)候,展示ajax加載的內(nèi)容呢?

我想到了記錄個(gè)數(shù),每次進(jìn)入路由再從這個(gè)數(shù)開始加載,但是呢我們沒有下拉更新,用戶再也看不到之前看的內(nèi)容。

后來我想到了H5 的緩存方法。使用了sessionStorage。

sessionStorage用于本地存儲一個(gè)會(huì)話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會(huì)話級別的存儲。

再離開一個(gè)路由之前,把這個(gè)路由現(xiàn)在狀態(tài)信息全部記錄下來(包括提示語,滑動(dòng)位置,新聞內(nèi)容等),等下次進(jìn)入這個(gè)路由的時(shí)候,再取出來數(shù)據(jù)這樣就實(shí)現(xiàn)了不管加載多少數(shù)據(jù),再次進(jìn)入這個(gè)路由的時(shí)候,都可以和上一個(gè)銜接上。

下圖為存在緩存里面的內(nèi)容。而且一關(guān)閉瀏覽器數(shù)據(jù)會(huì)被清空

這里寫圖片描述

有一個(gè)重要的地方是:sessionStorage 是有最大容量的,應(yīng)該是有容量限制的,我找了找localStorage 5M左右,sessionStorage 我還沒有找到,但在項(xiàng)目中運(yùn)行情況來看,暫時(shí)穩(wěn)定。

重要代碼展示

路由的定義

這里寫圖片描述

重點(diǎn)的是每個(gè)組件里面的方法

這里寫圖片描述

每個(gè)組件都共用的data , create 和 methods_all

var returndata={
    swipertime:swipertime,
    demoData: [],
    demoData2:[],
    message:'正在加載數(shù)據(jù)',
    iscrollaction:false,
    token:'{pigcms:$token}',
    cdn:"{pigcms::C('cdn_images')}",
    param:{
      api_url:"{pigcms::C('api_weixin')}",
      local_url:"{pigcms::C('site_url')}",
      classid: -1,
      startnum: 0 ,
      other:''
    },
    ajax_status:false,
    huadong:true,
  }
  //組件開始的時(shí)候,先注銷掉上一個(gè)組件的滑動(dòng),然后查看緩存里面有沒有數(shù)據(jù),如果有緩存就進(jìn)入緩存里面,如果沒有,就重新加載
  var create=function() {
    var that = this;
    if (that.myScroll){
      that.myScroll.destroy(); //把滑動(dòng)注銷掉
    }
    var session_name=this.$route.path;
    if(sessionStorage[session_name]){ //說明緩存里面有
      that.session_data();
    }else{
      that.ajax_data();
    }
  };
//有緩存的處理辦法
session_data:function () {
      var that = this;
      var session_name=this.$route.path;
      //把緩存內(nèi)容取出來
      var session_data= JSON.parse(sessionStorage[session_name]);
      for (x in session_data){
        switch(x){
          case 'data1':
            that.demoData=session_data[x];
            break;
          case 'data2':
            that.demoData2=session_data[x];
            break;
          case 'scroll_y':
            var scroll_y=session_data[x];
            break;
          case 'iscrollaction':
            that.iscrollaction=session_data[x];
            break;
          case 'startnum':
            that.param.startnum=session_data[x];
            break;
          case 'other':
            that.param.other=session_data[x];
            break;
          case 'message':
            that.message=session_data[x];
            break;
          case 'classid':
            that.param.classid=session_data[x];
            break;
        }
      }
      Vue.nextTick(function () {
        //初始化滾動(dòng)插件
        that.myScroll = new IScroll('#wrapper', {
          mouseWheel: true,
          wheelAction: 'zoom',
          click: true,
          scrollX: false,
          scrollY: true,
          startY:scroll_y,//滑動(dòng)定位到原來的位置
        });
        //滾動(dòng)監(jiān)聽
        that.myScroll.on('scrollStart',that.showbox);//滾動(dòng)監(jiān)聽,1000
        that.myScroll.on('scrollEnd',that.scrollaction);//滾動(dòng)監(jiān)聽,1000
        that.myScroll.refresh();
      })
    },
//沒有緩存重新加載
 ajax_data:function(){
      var that = this;
      if (this.$route.params.id != ''){
        that.param.classid=this.$route.params.id;
      }else{
        that.param.classid=-1;
      }
      that.param.startnum=0;//初始化數(shù)據(jù)
      var url = that.param.api_url + ******' + that.token + '&classid=' + that.param.classid + '&offset=' + that.param.startnum;//接口url
      that.$http.jsonp(url).then(function (response) {
        var res = response.data; //取出的數(shù)據(jù)
        this._data.demoData2 = res.new;
        this._data.demoData = res.data;
        this._data.param.other = res.other ;
        var listdata = res.data;  //數(shù)據(jù)
        var code = res.code; //狀態(tài)值
        if (res.other !== 1) {
          if (code == '20001') {
            if(listdata.length == 10){
              that.iscrollaction = true;
              that.message='正在加載數(shù)據(jù)';
            }else{
              that.iscrollaction = false;
              that.message='沒有更多資訊';
            }
          }else if (code == '20002') {
            that.iscrollaction=false;
            that.message='沒有更多資訊';
          } else if (code == '40001' || code == '40002') {
            that.message='訪問錯(cuò)誤';
            that.iscrollaction=false;
          }else{
            that.message='暫無數(shù)據(jù)';
            that.iscrollaction=false;
          }
        } else {
          that.iscrollaction=false;
        }
        that.param.startnum = listdata.length;
        Vue.nextTick(function () {
          //初始化滾動(dòng)插件
          that.myScroll = new IScroll('#wrapper', {
            mouseWheel: true,
            wheelAction: 'zoom',
            click: true,
            scrollX: false,
            scrollY: true,
          });
          //滾動(dòng)監(jiān)聽
          that.myScroll.on('scrollStart',that.showbox);//滾動(dòng)監(jiān)聽,1000
         that.myScroll.on('scrollEnd',that.scrollaction);//滾動(dòng)監(jiān)聽,1000
          //把數(shù)據(jù)放在緩存里面
          var session_name=that.$route.path;
          var session_all={};
          session_all.name=session_name;
          session_all.data1=that._data.demoData;
          session_all.data2=that._data.demoData2;
          session_all.scroll_y = 0;
          session_all.iscrollaction=that.iscrollaction;
          session_all.startnum= that.param.startnum;
          session_all.other= that.param.other;
          session_all.message= that.message;
          session_all.classid= that.param.classid;
          var session_all = JSON.stringify(session_all);
          sessionStorage[session_name]=session_all;
        })
      }, function (response) {
        //取消加載效果
        loadingToast.css('display', 'none');
        that.message='服務(wù)器維護(hù),請稍后重試';
      });
    },

遇到的困難

最折磨我的還是iscroll的問題,我們用的vue,所以呢 我的點(diǎn)擊都是用v-on:click 這種方式來完成的,但是呢,剛開始用iscroll的時(shí)候,點(diǎn)擊不生效,后來是給 iscroll的options.click 設(shè)置為true 才可以點(diǎn)擊。

后來有一個(gè)難題是:在滑動(dòng)過程中點(diǎn)擊會(huì)出發(fā)跳轉(zhuǎn),(本意是滑動(dòng)一下會(huì)再次點(diǎn)擊希望他停止滑動(dòng),卻發(fā)生了跳轉(zhuǎn)),造成了不好的體驗(yàn)。我去看了其他的網(wǎng)站, 有的安卓會(huì)發(fā)生,蘋果不會(huì),有的是蘋果發(fā)生,安卓不會(huì)。讓我不知道應(yīng)該怎么辦。

總結(jié)

sessionStorage 和  localStorage的區(qū)別

而localStorage用于持久化的本地存儲,除非主動(dòng)刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

以上所述是小編給大家介紹的vue實(shí)現(xiàn)新聞?wù)故卷摰牟襟E詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,請注明出處,謝謝!

相關(guān)文章

  • Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼

    Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼

    本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-07-07
  • 簡述Vue中容易被忽視的知識點(diǎn)

    簡述Vue中容易被忽視的知識點(diǎn)

    這篇文章主要介紹了簡述Vue中容易被忽視的知識點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • Vue實(shí)現(xiàn)簡易計(jì)算器

    Vue實(shí)現(xiàn)簡易計(jì)算器

    這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法

    vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法

    這篇文章主要介紹了vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • Vue2?this直接獲取data和methods原理解析

    Vue2?this直接獲取data和methods原理解析

    這篇文章主要為大家介紹了Vue2?this直接獲取data和methods原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • vue使用recorder.js實(shí)現(xiàn)錄音功能

    vue使用recorder.js實(shí)現(xiàn)錄音功能

    這篇文章主要為大家詳細(xì)介紹了vue使用recorder.js實(shí)現(xiàn)錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • Vue3之列表動(dòng)畫和狀態(tài)動(dòng)畫示例詳解

    Vue3之列表動(dòng)畫和狀態(tài)動(dòng)畫示例詳解

    這篇文章主要為大家介紹了Vue3之列表動(dòng)畫和狀態(tài)動(dòng)畫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • vue組件編寫之todolist組件實(shí)例詳解

    vue組件編寫之todolist組件實(shí)例詳解

    這篇文章主要介紹了vue組件編寫之todolist組件的實(shí)例講解,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-01-01
  • 解決vux 中popup 組件Mask 遮罩在最上層的問題

    解決vux 中popup 組件Mask 遮罩在最上層的問題

    這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 詳解Vue的mixin策略

    詳解Vue的mixin策略

    這篇文章主要介紹了Vue的mixin策略的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下
    2020-11-11

最新評論