vue104-123

原创已于 2023-02-11 20:09:42 修改 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-02-11 20:09:07 首次发布

文章介绍了如何调整影院组件的滚动条范围以适应不同布局，使用ElementUI和Vant构建侧边菜单。同时，文章探讨了数据懒加载的实现，通过监听滚动事件动态获取和加载数据。此外，还涉及Vue的状态管理工具Vuex的使用，包括状态存储、状态变更以及组件间的通信。最后，提到了页面底部选项卡的显示控制以及Vue应用的持久化策略。

影院组件

更改滚动条范围：
动态结算高度

//动态结算高度
this.height = document.documentElement.clientHeight-选项卡高度

this.height = document.documentElement.clientHeight- document.querySelector('footer').offsetHeight + 'px'

组件库elementUI

网址elementUI
组件渲染：

sideList" :key="data.id">
<el-submenu index="1" v-for="data in
<template slot="title"
><i class="el-icon-message"></i>导航一</template
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>

改为字符串：
加一个" "

vant引入

在这里插入图片描述
节点是this.$refs.navbar.$el

vant应用

通过查询文档，复制粘贴，增加点击事件，如预览效果，
通过传入index值，获取每次页面打开时显示的图片页

数据懒加载

每次检测到到底，触发函数获取数据
在这里插入图片描述
因为上面这个元素会导致第一次就立即触发到底的效果

List组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部
时，会触发 load 事件并将 loading设置成 true。此时可以发起异步操作并更
新数据，数据更新完毕后，将loading设置成false 即可。若数据已全部加载完
毕，则直接将finished 设置成 true 即可。
取数据：

this.current++
http({
url: /gateway?cityId=440100&pageNum=${this.current}&pageSize=10&
type=1&k=5196770,
headers: {
'X-Host':'mall.film-ticket.film.list'
}
}).then((res)=>{
// console.log(res.data.data.films)
this.datalist = res.data.data.films
}）

如果到底了，就停止

if (this.datalist.length=this.total//后端数据的总长度 ）{
this.finished = true
return}

loading加载&axios拦截

加载：

Toast.loading({
message：'加载中.….'，
forbidclick: true
})

是方法，需要单独引入

duration展示时长（ms），值为0时，toast不会消失
默认2000

//在成功后拦截--hideloading
http.interceptors.response.use(function (response){
// Any status code that lie within the range of 2xx cause this function to
	//trigger
// Do something with response data

city数据组件

this.$router.push('/city')

点击事件实现跳转
实现原理

1,316条==>A，B进行分组

2．利用转换后的数组，结合组件库进行渲染页面。
过滤：

console.log(letterList)
//
letterList.forEach(Letter => {
var newList = list.filter(item => item.pinyin.substring(0, 1).
toUpperCase() === letter)
console.log(newList)
}）

vuex引入

IndexBar索引栏
在这里插入图片描述
vuex：

Vue.use(Vuex)
export default new Vuex.Store({
// state公共状态
state: {
cityId: '310100'
cityName:'上海'
}）

mutations: {
changeCityName (state, cityName) {
state.cityName =cityName
// console.log(cityName)
}

vuex异步引入


// vuex 管理保存公共状态，（分散在各个组件内的状态，统一管理，）

//注意：
//vuex默认是管理在内存， 一刷新页面，公共状态就丢失了。
// vuex 持久化-todo
/*vuex 项目应用
1.非父子的通信
2.后端数据的缓存快照，减少重复数据请求，减轻服务器压力，提高用户体验
*/

vuex新写法

export default {
data () {
return {
height:'opx'
}
},
computed: {
cinemaList: function () {
return this.$store.state.cinemalist
} 
}，

import {mapState,mapActions,mapMutations} from 'vuex'

methods:{
...mapActions(['getCinemaData']),
...mapMutations(['clearCinema']),
handleLeft(){
// console.log('left')
this.$router.push('/city')
//清空cinemaList
this.$store.commit('clearCinema')
}，

底部选项卡

show (state){
state.isTabbarShow = true
}，
hide (state) K
state.isTabbarShow = false
}

var obj = {
created () {
this.$store.commit('hide')
},
destroyed () {
this.$store.commit('show')
}

vue持久化 vue-persist

github下载