1、Vue、vueRouter 项目中均使用 cdn引入的 。
2、目前使用中还是有些坑需要填，2.0语法兼容会有些问题。
3、建议新项目中使用，老项目不建议大面积使用。
/** router.js **/
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
scrollBehavior(to, from, savedPosition) {
return savedPosition ? savedPosition : { left: 0, top: 0 }
},
routes: [
{
path: "/***",
name: "***",
component: () => import("@/views/**/***.vue"), meta: {
title: "**"
}
},
{
path: "/***",
name: "***",
component: () => import("@/views/**/***.vue"),
meta: {
title: "**"
}
}
]
})
export default router
/** router.js **/
import App from "./App.vue"
import router from "./router"
const app = Vue.createApp(App)
const {
loading,
showToast,
showModal,
BackFixed,
Header,
PageLoading,
UiEmpty,
Swiper
} = window.framework
router.afterEach(to => {
const title = to.meta.title
if (title) {
document.title = title
}
})
app.use(router).mount("#app")
/*** **.vue ** /
<script type="text/javascript">
import { meetingPath } from "@/config/index"
import study_list from "@/models/study_list"
import store from "@/store/training"
const { ref, computed, getCurrentInstance, onMounted, onBeforeUnmount } = Vue
export default {
setup() {
const {
appContext: {
app: {
config: { globalProperties }
}
}
} = getCurrentInstance()
const { $showLoading, $hideLoading, $showToast } = globalProperties
const router = VueRouter.useRouter()
const list = ref([])
const historyList = ref([])
const pageNo = ref(1)
const showLoading = ref(true)
const isScrollLoad = ref(true)
const pageCount = ref(0)
const timer = ref(null)
const isEmpty = ref(false)
const navIndex = computed(() => {
return store.navIndex
})
const isMine = computed(() => {
return store.isMine
})
onMounted(() => {
$showLoading()
if (store.navIndex == 0) {
getCourseStudyList()
} else {
getHistoryStudyList()
}
window.addEventListener(
"scroll",
scrollLoadList,
utils.isPassive() ? { passive: true, capture: true } : true
)
})
onBeforeUnmount(() => {
LazyLoad.removeLazyLoad()
window.cancelAnimationFrame(timer.value)
window.removeEventListener(
"scroll",
scrollLoadList,
utils.isPassive() ? { passive: true, capture: true } : true
)
})
const navAction = val => {
if (val != store.navIndex) {
store.isMine = false
}
store.navIndex = val
if (val == 0) {
getCourseStudyList()
} else {
pageNo.value = 1
showLoading.value = false
getHistoryStudyList()
}
}
const subNavAction = val => {
store.isMine = val
if (store.navIndex == 0) {
getCourseStudyList()
} else {
pageNo.value = 1
showLoading.value = false
getHistoryStudyList()
}
}
const getCourseStudyList = () => {
study_list
.getCourseStudyList({
type: "GET",
hostPath: meetingPath,
data: {
isMine: isMine.value
}
})
.then(result => {
$hideLoading()
const data = result.data
if (result.code == 200) {
list.value = data
isEmpty.value = !data.length
} else {
$showToast(result.message)
}
})
}
const getHistoryStudyList = () => {
study_list
.getHistoryStudyList({
type: "GET",
hostPath: meetingPath,
data: {
pageNo: pageNo.value,
pageSize: 10,
isMine: isMine.value
}
})
.then(result => {
$hideLoading()
const data = result.data
if (result.code == 200 && data && data.list) {
const { list } = data
if (pageNo.value > 1) {
historyList.value = historyList.value.concat(list || [])
} else {
historyList.value = list || []
}
if (pageNo.value == pageCount.value || !data.pageCount) {
showLoading.value = false
}
isEmpty.value = !historyList.value.length
pageCount.value = data.pageCount
isScrollLoad.value = true
}
})
}
const scrollLoadList = () => {
const winHeight = window.innerHeight
const scrollTop = document.scrollingElement.scrollTop
const scrollViewHeight =
document.querySelector(".scroll-view-wrapper").offsetHeight - 20
const realFunc = () => {
if (
winHeight + scrollTop >= scrollViewHeight &&
pageNo.value < pageCount.value
) {
pageNo.value += 1
showLoading.value = true
getHistoryStudyList()
} else {
isScrollLoad.value = true
}
}
if (isScrollLoad.value) {
isScrollLoad.value = false
timer.value = window.requestAnimationFrame(realFunc)
}
}
const routerAction = url => {
router.push(url)
}
return {
list,
historyList,
pageNo,
showLoading,
isScrollLoad,
pageCount,
timer,
isEmpty,
navIndex,
isMine,
navAction,
subNavAction,
routerAction
}
}
}
</script>
/** **.vue **/
网友评论