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í)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法
這篇文章主要介紹了vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01vue使用recorder.js實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了vue使用recorder.js實(shí)現(xiàn)錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11Vue3之列表動(dòng)畫和狀態(tài)動(dòng)畫示例詳解
這篇文章主要為大家介紹了Vue3之列表動(dòng)畫和狀態(tài)動(dòng)畫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04