VUE笔记--详情页跳转以及制作
详情页跳转以及制作1.详情页跳转利用router来进行页面的跳转,配置详情页的路由,eg:/detail:iid从首页获取到每个小goodsitem的iid,从而跳转到其相应的详情页,进而获得相应的详情信息。2.Bug1 解决从其他页面返回到首页,保存首页的停留位置查看在整个app中有没有使用keep-alive设置一个变量y值,通过activated()和deactivated...
详情页跳转以及制作
1.详情页跳转
- 利用router来进行页面的跳转,配置详情页的路由,eg:/detail:iid
- 从首页获取到每个小goodsitem的iid,从而跳转到其相应的详情页,进而获得相应的详情信息。
2.Bug1 解决从其他页面返回到首页,保存首页的停留位置
- 查看在整个app中有没有使用keep-alive
- 设置一个变量y值,通过钩子函数activated()和deactivated()两个方法来记录和重新设置回到首页的y值。注意:y=this.$refs.scroll.getScrollY()
3.详情页导航栏制作
1.在detail文件夹中封装一个子文件夹,用于放后续的子组件。
2.创建一个DetailNavBar的子组件,导入先前的NavBar组件,向插槽中添加要加入的导航信息
3.给导航栏设置两个监听。一是对于返回按钮,点击后调用 this.$router.back();
而是对于文字,监听点击到后文字颜色变红。
4.请求详情页的数据
1.设置网络请求
import { request } from './request'
export function getDetailData(iid) {
return request({
url: '/detail',
params: {
iid
}
})
}
2.通过this.$route.params.iid来请求其中的数据
5.bug2 - 【解决】详情页只请求原来的一份数据
因为在全局添加了keep-alive,所以导致这个问题的存在。
解决办法就是使Detail解除keep-alive的模式,使用exclude=“Detail”
6.建立各种子组件,一步步把数据请求到页面中
如果子组件需要传入的信息太多,可以通过创建一个类存储,转收数据。
7.时间戳转换
1.导入Date的格式化方法
import {formatDate} from "../../../common/utils"
2.使用过滤器对时间戳进行处理
filters: {
showDate(value){
// 1.将时间戳转化为date对象
const date = new Date(value*1000)
// 2.将date进行格式化
return formatDate(date,"yyyy-MM-dd")
}
}
mixin用法
由于better-scorll而引起的,图片滚动bug在详情页也会出现。
就要使用对于图片加载的监听方式,
这里就采用,当离开home页面的时候取消调用refresh(),
进入详情页的时候再调用,反之亦然。
先设置一个变量itemImgListener,然后
在生命周期函数中
mounted() {
// 1.监听item中图片加载事件
let newRefresh = debounce(this.$refs.scroll.refresh, 100);
// 2.对监听的事件进行保存
this.itemImgListener = () => {
newRefresh();
};
this.$bus.$on("itemImageLoad", this.itemImgListener);
},
//通过destroyed或者deactivated进行全局监听的取消
destroyed() {
this.$bus.$off("itemImageLoad", this.itemImgListener);
},
这是由于部分代码的重复,home和detial需要用到重复的代码,就可以创建一个mixin.js文件,抽离出重复的部分然后导出调用:
import { debounce } from "./utils";
export const itemListenerMixin = {
data () {
return {
itemImgListener:null
}
},
mounted() {
let newRefresh = debounce(this.$refs.scroll.refresh, 100);
this.itemImgListener = () => {
newRefresh(20, 30, "abc");
};
this.$bus.$on("itemImageLoad", this.itemImgListener);
},
}
更多mixin知识:https://cn.vuejs.org/v2/api/#Vue-mixin
点击标题跳转相应页面
通过获取到的offsettop,进行监听滚动
this.$refs.scroll.scrollTo(0, -this.themeTopYs[index] + 50, 200);
滚动内容显示对应标题
首先先对滚动进行监听,然后让滚动的y值与每个类别的offsettop作比较,运用for当在某个区间内的时候就改变标题组件中的currentindex值。
点击购物车加入商品
原理:通过vuex进行记录。
点击购物车,获得这个商品的相关信息,然后存到vuex数组中,然后在action()方法中判断,如果是点击当前的商品,则数量加一,如果不是,给相应商品数量加一,如果都不是,闯进新的商品,数量为一。
使用getters来获得vuex中index.js的信息(将计算属性存储到getters中)
1.创建getters.js,以及索要获取的信息
export default{
cartLength(state){
return state.cartList.length
},
cartList(state){
return state.cartList
}
}
2.index中导入getters,然后在购物车组件中导入{mapGetters}的vuex组件
并使用
computed: {
...mapGetters({
length:'cartLength',
list:'cartList'
})
}
Vuex-actions返回Promise-mapActions
如果我们不想通过从store中去出方法时,比如这样取出actions中的addCart方法:
this.$store.dispatch("addCart", product).then(res => {});
我们可以通过vuex中的mapActions,来直接调用这个方法。
首先导入{mapActions}
之后,在方法中注册,后使用
methods:{
...mapActions:(['addCart'])
// 2.将商品添加到购物车里
this.addCart(product).then(res => {
this.$toast.show(res,1500)
});
}
关于toast的使用
传统方法:
创建toast组件,在父组件中导入,注册,调用。
传入显示的文本信息,和是否显示的布尔信息。
在产品成功加入购物车或者点击结算商品时改变show的布尔值
封装方法:将toast当做插件注册到vue中。
1.在main.js中注册
import toast from './components/common/toast/index'
// 安装toast
Vue.use(toast)
- 在toast文件夹中创建index的js文件
import Toast from "./Toast.vue"
const obj = {}
obj.install = function(Vue){
// 1.创建组件构造器
const toastContrustor = Vue.extend(Toast)
// 2.通过new组件构造器,创建组件
const toast = new toastContrustor()
// 3.将创建好的对象,手动挂载到一个元素上
toast.$mount(document.createElement('div'))
// 4.toast.$el就是上面的div
document.body.appendChild(toast.$el)
Vue.prototype.$toast = toast;
}
export default obj
3.在Toast组件中直接写入show方法
methods: {
show(message, duration=2000) {
this.isShow = true;
this.message = message;
setTimeout(() => {
this.isShow = false;
this.message = "";
}, duration);
}
}
4.需要使用toast时只需要在相应地方调用toast,并使用其中的方法。
this.$toast.show(res,1500)
补充一些细节
1.fastclick减少300ms移动端点击延迟
使用方法:
1.npm install fastclick --save 安装fastclick
2.在main文件中导入
3.调用fastclick的attach()方法
2.图片懒加载:vue-lazyload
使用方法:
1.npm安装
2.main.js中导入
3.Vue.use()中安装
4.修改对应img:src为v-lazy:src
同时也可以设置其他的属性
更多推荐
所有评论(0)