vue实现新闻展示页的步骤详解

var returndata={    swipertime:swipertime,    demoData: [],    demoData2:[],    message:'正在加载数据',    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,  }  //组件开始的时候，先注销掉上一个组件的滑动，然后查看缓存里面有没有数据，如果有缓存就进入缓存里面，如果没有，就重新加载  var create=function() {    var that = this;    if (that.myScroll){      that.myScroll.destroy(); //把滑动注销掉    }    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;      //把缓存内容取出来      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 () {        //初始化滚动插件        that.myScroll = new IScroll('#wrapper', {          mouseWheel: true,          wheelAction: 'zoom',          click: true,          scrollX: false,          scrollY: true,          startY:scroll_y,//滑动定位到原来的位置        });        //滚动监听        that.myScroll.on('scrollStart',that.showbox);//滚动监听,1000        that.myScroll.on('scrollEnd',that.scrollaction);//滚动监听,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;//初始化数据      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; //取出的数据        this._data.demoData2 = res.new;        this._data.demoData = res.data;        this._data.param.other = res.other ;        var listdata = res.data;  //数据        var code = res.code; //状态值        if (res.other !== 1) {          if (code == '20001') {            if(listdata.length == 10){              that.iscrollaction = true;              that.message='正在加载数据';            }else{              that.iscrollaction = false;              that.message='没有更多资讯';            }          }else if (code == '20002') {            that.iscrollaction=false;            that.message='没有更多资讯';          } else if (code == '40001' || code == '40002') {            that.message='访问错误';            that.iscrollaction=false;          }else{            that.message='暂无数据';            that.iscrollaction=false;          }        } else {          that.iscrollaction=false;        }        that.param.startnum = listdata.length;        Vue.nextTick(function () {          //初始化滚动插件          that.myScroll = new IScroll('#wrapper', {            mouseWheel: true,            wheelAction: 'zoom',            click: true,            scrollX: false,            scrollY: true,          });          //滚动监听          that.myScroll.on('scrollStart',that.showbox);//滚动监听,1000         that.myScroll.on('scrollEnd',that.scrollaction);//滚动监听,1000          //把数据放在缓存里面          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='服务器维护，请稍后重试';      });    },