Vue.js項目重構，輕鬆實現上拉加載滾動位置還原
前言
上一篇《Vue.js輕鬆實現頁面後退時，還原滾動位置》只是簡單的實現了路由切換時進行的滾動位置還原，不少朋友就來問上拉加載怎麼實現啊！因而我想起了之前作過一個叫vue-cnode的項目，因而花了兩天時間進行了重構，徹底的移除了Vuex，使用了Vuet來作爲狀態的管理工具。若是關注Vuet的朋友就會發現，版本更新得好快，簡直就是版本帝啊！！！其實Vuet的版本升級，都是向下兼容的，每次的版本發佈都會通過完整的單元測試和e2e測試，極大的保證了發佈版本的穩定性。javascript
項目源碼
需求分析
- 記錄上拉請求時的頁數
- 頁面後退時，還原以前列表頁面的狀態
- 列表分類切換時，進行狀態重置
- 從列表A點擊詳情A，頁面後退，從新打開詳情A，還原以前訪問詳情A狀態
- 從列表A點擊詳情A，頁面後退，從新打開詳情B，清除詳情A的狀態，初始化詳情B的狀態
安裝
npm install --save vuet複製代碼
Vuet實例
import Vue from 'vue'
import Vuet from 'vuet'
import utils from 'utils'
import http from 'http'
Vue.use(Vuet)
export default new Vuet({
pathJoin: '-', // 定義模塊的鏈接符
modules: {
topic: {
create: {
data () {
return {
title: '', // 標題
tab: '', // 發表的板塊
content: '' // 發表的內容
}
},
manuals: {
async create ({ state }) {
if (!state.title) {
return utils.toast('標題不能爲空')
} else if (!state.tab) {
return utils.toast('選項不能爲空')
} else if (!state.content) {
return utils.toast('內容不能爲空')
}
const res = await http.post(`/topics`, {
...state
})
if (res.success) {
this.reset()
} else {
utils.toast(res.error_msg)
}
return res
}
}
},
/********* 實現列表上拉加載滾動位置還原的核心代碼開始 *************/
list: {
data () {
return {
data: [], // 列表存儲的數據
loading: true, // 數據正在加載中
done: false, // 數據是否已經所有加載完成
page: 1 // 加載的頁數
}
},
async fetch ({ state, route, params, path }) {
// 注，在vuet 0.1.2以上版本，會多帶一個params.routeWatch參數，咱們能夠根據這個來判斷頁面是否發生了變化
if (params.routeWatch === true) { // 路由發生了變化，重置模塊狀態
this.reset(path)
} else if (params.routeWatch === false) { // 路由沒有變化觸發的請求，多是從詳情返回到列表
return {}
}
// params.routeWatch 沒有參數，則是上拉加載觸發的調用
const { tab = '' } = route.query
const query = {
tab,
mdrender: false,
limit: 20,
page: state.page
}
const res = await http.get('/topics', query)
const data = params.routeWatch ? res.data : [...state.data, ...res.data]
return {
data, // 更新模塊的列表數據
page: ++state.page, // 每次請求成功後，頁數+1
loading: false, // 數據加載完成
done: res.data.length < 20 // 判斷列表的頁數是否所有加載完成
}
}
},
/********* 實現列表上拉加載滾動位置還原的核心代碼結束 *************/
detail: {
data () {
return {
data: {
id: null,
author_id: null,
tab: null,
content: null,
title: null,
last_reply_at: null,
good: false,
top: false,
reply_count: 0,
visit_count: 0,
create_at: null,
author: {
loginname: null,
avatar_url: null
},
replies: [],
is_collect: false
},
existence: true,
loading: true,
commentId: null
}
},
async fetch ({ route }) {
const { data } = await http.get(`/topic/${route.params.id}`)
if (data) {
return {
data,
loading: false
}
}
return {
existence: false,
loading: false
}
}
}
},
user: { // 登陸用戶的模塊
self: {
data () {
return {
data: JSON.parse(localStorage.getItem('vue_cnode_self')) || {
avatar_url: null,
id: null,
loginname: null,
success: false
}
}
},
manuals: {
async login ({ state }, accesstoken) { // 用戶登陸方法
const res = await http.post(`/accesstoken`, { accesstoken })
if (typeof res === 'object' && res.success) {
state.data = res
localStorage.setItem('vue_cnode_self', JSON.stringify(res))
localStorage.setItem('vue_cnode_accesstoken', accesstoken)
}
return res
},
signout () { // 用戶退出方法
localStorage.removeItem('vue_cnode_self')
localStorage.removeItem('vue_cnode_accesstoken')
this.reset()
}
}
},
detail: {
data () {
return {
data: {
loginname: null,
avatar_url: null,
githubUsername: null,
create_at: null,
score: 0,
recent_topics: [],
recent_replies: []
},
existence: true,
loading: true,
tabIndex: 0
}
},
async fetch ({ route }) {
const { data } = await http.get(`/user/${route.params.username}`)
if (data) {
return {
data,
loading: false
}
}
return {
existence: false,
loading: false
}
}
},
messages: {
data () {
return {
data: {
has_read_messages: [],
hasnot_read_messages: []
},
loading: true
}
},
async fetch () {
// 用戶未登陸，攔截請求
if (!this.getState('user-self').data.id) return
const { data } = await http.get(`/messages`, { mdrender: true })
return {
data
}
},
count: {
data () {
return {
data: 0
}
},
async fetch () {
// 用戶未登陸，攔截請求
if (!this.getState('user-self').data.id) return
const res = await http.get('/message/count')
if (!res.data) return
return {
data: res.data
}
}
}
}
}
}
})複製代碼
在Vuet實例建立完成後，咱們就能夠在組件中鏈接咱們的Vuet了。html
- 首頁列表
<template>
<div>
<nav class="nav">
<ul flex="box:mean">
<li v-for="item in tabs" :class="{ active: item.tab === ($route.query.tab || '') }">
<router-link :to="{ name: 'index', query: { tab: item.tab } }">{{ item.title }}</router-link>
</li>
</ul>
</nav>
<!-- 注意了，因爲個人頁面佈局是一個局部滾動條，因此須要指定一個name 若是你的頁面是全局滾動條，設置指令爲 v-vuet-scroll.window="{ path: 'topic-list' }" -->
<v-content v-vuet-scroll="{ path: 'topic-list', name: 'content' }">
<ul class="list">
<li v-for="item in list.data" key="item.id">
<router-link :to="{ name: 'topic-detail', params: { id: item.id } }">
<div class="top" flex="box:first">
<div class="headimg" :style="{ backgroundImage: 'url(' + item.author.avatar_url + ')' }"></div>
<div class="box" flex="dir:top">
<strong>{{ item.author.loginname }}</strong>
<div flex>
<time>{{ item.create_at | formatDate }}</time>
<span class="tag">#分享#</span>
</div>
</div>
</div>
<div class="common-typeicon" flex v-if="item.top || item.good">
<div class="icon" v-if="item.good">
<i class="iconfont icon-topic-good"></i>
</div>
<div class="icon" v-if="item.top">
<i class="iconfont icon-topic-top"></i>
</div>
</div>
<div class="tit">{{ item.title }}</div>
<div class="expand" flex="box:mean">
<div class="item click" flex="main:center cross:center">
<i class="iconfont icon-click"></i>
<div class="num">{{ item.visit_count > 0 ? item.visit_count : '暫無閱讀' }}</div>
</div>
<div class="item reply" flex="main:center cross:center">
<i class="iconfont icon-comment"></i>
<div class="num">{{ item.reply_count > 0 ? item.reply_count : '暫無評論' }}</div>
</div>
<div class="item last-reply" flex="main:center cross:center">
<time class="time">{{ item.last_reply_at | formatDate }}</time>
</div>
</div>
</router-link>
</li>
</ul>
<v-loading :done="list.done" :loading="list.loading" @seeing="$vuet.fetch('topic-list')"></v-loading>
</v-content>
<v-footer></v-footer>
</div>
</template>
<script> import { mapModules, mapRules } from 'vuet' export default { mixins: [ mapModules({ list: 'topic-list' }), // 鏈接咱們定義的Vuet.js的狀態 mapRules({ route: 'topic-list' }) // 使用Vuet.js內置的route規則來對頁面數據和滾動位置進行管理 ], data () { return { tabs: [ { title: '所有', tab: '' }, { title: '精華', tab: 'good' }, { title: '分享', tab: 'share' }, { title: '問答', tab: 'ask' }, { title: '招聘', tab: 'job' } ] } } } </script>複製代碼
- 頁面詳情
<template>
<div>
<v-header title="主題">
<div slot="left" class="item" flex="main:center cross:center" v-on:click="$router.go(-1)">
<i class="iconfont icon-back"></i>
</div>
</v-header>
<!-- 設置詳情的局部滾動條 -->
<v-content style="bottom: 0;" v-vuet-scroll="{ path: 'topic-detail', name: 'content' }">
<v-loading v-if="detail.loading"></v-loading>
<v-data-null v-if="!detail.existence" msg="話題不存在"></v-data-null>
<template v-if="!detail.loading && detail.existence">
<div class="common-typeicon" flex v-if="data.top || data.good">
<div class="icon" v-if="data.good">
<i class="iconfont icon-topic-good"></i>
</div>
<div class="icon" v-if="data.top">
<i class="iconfont icon-topic-top"></i>
</div>
</div>
<ul class="re-list">
<!-- 樓主信息 start -->
<li flex="box:first">
<div class="headimg">
<router-link class="pic" :to="{ name: 'user-detail', params: { username: author.loginname } }" :style="{ backgroundImage: 'url(' + author.avatar_url + ')' }"></router-link>
</div>
<div class="bd">
<div flex>
<router-link flex-box="0" :to="{ name: 'user-detail', params: { username: author.loginname } }">{{ author.loginname }}</router-link>
<time flex-box="1">{{ data.create_at | formatDate }}</time>
<div flex-box="0" class="num">#樓主</div>
</div>
</div>
</li>
<!-- 樓主信息 end -->
<!-- 主題信息 start -->
<li>
<div class="datas">
<div class="tit">{{ data.title }}</div>
<div class="bottom" flex="main:center">
<div class="item click" flex="main:center cross:center">
<i class="iconfont icon-click"></i>
<div class="num">{{ data.visit_count }}</div>
</div>
<div class="item reply" flex="main:center cross:center">
<i class="iconfont icon-comment"></i>
<div class="num">{{ data.reply_count }}</div>
</div>
</div>
</div>
<div class="markdown-body" v-html="data.content"></div>
</li>
<!-- 主題信息 end -->
<li class="replies-count" v-if="replies.length">
共(<em>{{ replies.length }}</em>)條回覆
</li>
<!-- 主題評論 start -->
<li v-for="(item, $index) in replies">
<div flex="box:first">
<div class="headimg">
<router-link class="pic" :to="{ name: 'user-detail', params: { username: item.author.loginname } }" :style="{ backgroundImage: 'url(' + item.author.avatar_url + ')' }"></router-link>
</div>
<div class="bd">
<div flex>
<router-link flex-box="0" :to="{ name: 'user-detail', params: { username: item.author.loginname } }">{{ item.author.loginname }}</router-link>
<time flex-box="1">{{ item.create_at | formatDate }}</time>
<div flex-box="0" class="num">#{{ $index + 1 }}</div>
</div>
<div class="markdown-body" v-html="item.content"></div>
<div class="bottom" flex="dir:right cross:center">
<div class="icon" @click="commentShow(item, $index)">
<i class="iconfont icon-comment-topic"></i>
</div>
<div class="icon" :class="{ fabulous: testThing(item.ups) }" v-if="item.author.loginname !== user.data.loginname" @click="fabulousItem(item)">
<i class="iconfont icon-comment-fabulous"></i>
<em v-if="item.ups.length">{{ item.ups.length }}</em>
</div>
</div>
</div>
</div>
<reply-box v-if="detail.commentId === item.id" :loginname="item.author.loginname" :replyId="item.id"></reply-box>
</li>
<!-- 主題評論 end -->
</ul>
<div class="reply" v-if="user.data.id">
<reply-box @success="$vuet.fetch('topic-detail')"></reply-box>
</div>
<div class="tip-login" v-if="!user.data.id">
你還未登陸，請先
<router-link to="/login">登陸</router-link>
</div>
</template>
</v-content>
</div>
</template>
<script> import http from 'http' import replyBox from './reply-box' import { mapModules, mapRules } from 'vuet' export default { mixins: [ // 鏈接詳情和登陸用戶模塊 mapModules({ detail: 'topic-detail', user: 'user-self' }), // 同樣是使用route規則對頁面的數據進行管理 mapRules({ route: 'topic-detail' }) ], components: { replyBox }, computed: { data () { return this.detail.data }, author () { return this.detail.data.author }, replies () { return this.detail.data.replies } }, methods: { testThing (ups) { // 驗證是否點贊 return ups.indexOf(this.user.data.id || '') > -1 }, fabulousItem ({ ups, id }) { // 點贊 if (!this.user.data.id) return this.$router.push('/login') var index = ups.indexOf(this.user.data.id) if (index > -1) { ups.splice(index, 1) } else { ups.push(this.user.data.id) } http.post(`/reply/${id}/ups`) }, commentShow (item) { // 顯示隱藏回覆框 if (!this.user.data.id) return this.$router.push('/login') this.detail.commentId = this.detail.commentId === item.id ? null : item.id } } } </script>複製代碼
總結
由於篇幅有限，因此只列出了列表和詳情的代碼，你們有興趣深刻的話，能夠看下vue-cnode的代碼。這是基於Vuet進行狀態管理的完整項目，包含了用戶的登陸退出，路由頁面，滾動位置還原，帖子編輯狀態保存等等，麻雀雖小，倒是五臟俱全。vue
相關文章
- 1. Vue.js項目重構，輕鬆實現上拉加載滾動位置還原
- 2. Vue.js輕鬆實現頁面後退時，還原滾動位置
- 3. 實戰 | maven 輕鬆重構項目
- 4. vue.js 實現下拉無限滾動加載新數據
- 5. Vue.js 輕鬆上手
- 6. Vue.js上下滾動加載組件
- 7. 原生js實現上拉加載
- 8. SwipeRefreshLayout+Recyclerview實現下拉加載和上拉自動加載
- 9. 上拉加載實現
- 10. 滾動加載圖片（懶加載）實現原理
- 更多相關文章...
- • ionic 加載動作 - ionic 教程
- • ionic 加載動畫 - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
