VUE 笔记 ilovecoding 206 详情页-点击标题滚到对应内容
内容来自 B站 ilovecoding 《最全最新Vue、Vuejs教程，从入门到精通》
203 是内容回顾
204 bug处理-首页TabControl不一致的问题，由于视频内容重复，该问题之前已处理
205 bug处理-详情页不能滚动的bug处理，由于视频内容重复，该问题之前已处理
1. DetailNavBar.vue
1.1 itemClick 方法中向外传递事件 titleClick
<template>
<div>
<nav-bar>
<template v-slot:left>
<div class="back" @click="backClick">
<img src="~assets/img/common/back.svg" alt=""/>
</div>
</template>
<template v-slot:center>
<div class="title">
<div
v-for="(item, index) in titles"
:key="item"
:class="{'title-item': true, 'active': this.currentIndex === index}"
@click="itemClick(index)">
{{item}}
</div>
</div>
</template>
</nav-bar>
</div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
name: 'DetailNavBar',
components: {
NavBar
},
data() {
return {
titles: ['商品', '参数', '评论', '推荐'],
currentIndex: 0
}
},
methods: {
itemClick(index) {
this.currentIndex = index
this.$emit('titleClick', index)
},
backClick() {
this.$router.back()
}
}
}
</script>
<style scoped>
.title {
display: flex;
font-size: 13px;
}
.title-item {
flex: 1;
}
.active {
color: var(--color-high-text);
}
.back img {
margin-top: 12px;
}
</style>
2. Detail.vue
2.1 增加方法 titleClick，添加到 detail-nav-bar 的 titleClick 事件上
2.2 数组 themeTopYs 用来存储位置
2.3 方法 imageLoad 中获取位置
<template>
<div id="detail">
<detail-nav-bar @titleClick="titleClick" class="detail-nav"/>
<scroll ref="scroll" class="detail-scroll-content">
<detail-swiper :top-images="topImages"/>
<detail-base-info :goods="goods"/>
<detail-shop-info :shop="shop"/>
<detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
<detail-param-info ref="param" :param-info="paramInfo"/>
<detail-comment-info ref="comment" :comment-info="commentInfo"/>
<goods-list ref="recommond" :goods="recommends"/>
</scroll>
</div>
</template>
<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import {getDetail, getRecommend, Goods, Shop, GoodsParam} from 'network/detail'
import { itemListenerMixin } from 'common/mixin'
export default {
name: 'Detail',
components: {
DetailNavBar,
DetailSwiper,
DetailBaseInfo,
DetailShopInfo,
DetailGoodsInfo,
DetailParamInfo,
DetailCommentInfo,
Scroll,
GoodsList
},
mixins: [itemListenerMixin],
data() {
return {
iid: null,
topImages: [],
goods: {},
shop: {},
detailInfo: {},
paramInfo: {},
commentInfo: {},
recommends: [],
themeTopYs: []
}
},
methods: {
getThemeTopY() {
this.themeTopYs.push(0)
this.themeTopYs.push(this.$refs.param.$el.offsetTop - 44)
this.themeTopYs.push(this.$refs.comment.$el.offsetTop - 44)
this.themeTopYs.push(this.$refs.recommond.$el.offsetTop - 44)
},
imageLoad() {
this.$refs.scroll.refresh()
this.getThemeTopY()
},
titleClick(index) {
this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 200)
}
},
created() {
// 1. 保存传入的iid
this.iid = this.$route.params.iid
// 2. 根据iid请求详情数据
getDetail(this.iid).then(res => {
const data = res.result
// 1. 获取顶部的图片轮播数据
this.topImages = data.itemInfo.topImages
// 2. 获取商品信息
this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
// 3. 创建店铺信息的对象
this.shop = new Shop(data.shopInfo)
// 4. 保存商品的详情数据
this.detailInfo = data.detailInfo
// 5. 获取参数的信息
this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
// 6. 取出评论的信息
if (data.rate.cRate !== 0) {
this.commentInfo = data.rate.list[0]
}
// 初始化scroll
this.$nextTick(() => {
this.$refs.scroll.createScroll()
})
})
// 3. 请求推荐数据
getRecommend().then(res => {
this.recommends = res.data.list
})
}
}
</script>
<style scoped>
#detail {
position: relative;
z-index: 9;
background-color: #fff;
height: 100vh;
}
.detail-nav {
position: relative;
z-index: 9;
background-color: #fff;
}
.detail-scroll-content {
height: calc(100% - 44px);
}
</style>
3. 另外一种实现方式
3.1 Scroll.vue 增加方法 scrollToElement
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
import ObserveImage from '@better-scroll/observe-image'
import {debounce} from 'common/utils'
export default {
name: 'Scroll',
props: {
probeType: {
type: Number,
default: 0
},
pullUpLoad: {
type: Boolean,
default: false
},
observeImage: {
type: Boolean,
default: false
}
},
data() {
return {
scroll: null
}
},
methods: {
createScroll() {
BScroll.use(PullUp)
BScroll.use(ObserveImage)
// 创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper, {
click: true,
probeType: this.probeType,
pullUpLoad: this.pullUpLoad,
observeImage: this.observeImage
})
if (this.probeType === 2 || this.probeType === 3) {
// 监听滚动位置
this.scroll.on('scroll', (position) => {
this.$emit('scroll', position)
})
}
if (this.pullUpLoad) {
// 监听上拉事件
this.scroll.on('pullingUp', () => {
this.$emit('pullingUp')
})
}
const refresh = debounce(this.refresh, 200)
// 监听item图片加载完成
this.$EventBus.on('itemImageLoad', () => {
refresh()
})
},
scrollTo(x, y, time = 300) {
this.scroll.scrollTo(x, y, time)
},
finishPullUp() {
this.scroll.finishPullUp()
},
refresh() {
console.log('-------------------')
this.scroll.refresh();
},
getScrollY() {
return this.scroll.y
},
scrollToElement(el, time = 200) {
this.scroll.scrollToElement(el, time)
}
},
mounted() {
this.createScroll()
}
}
</script>
<style scoped></style>
3.2 Detail.vue 使用 scrollToElement
<template>
<div id="detail">
<detail-nav-bar @titleClick="titleClick" class="detail-nav"/>
<scroll ref="scroll" class="detail-scroll-content">
<detail-swiper ref="swiper" :top-images="topImages"/>
<detail-base-info :goods="goods"/>
<detail-shop-info :shop="shop"/>
<detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
<detail-param-info ref="param" :param-info="paramInfo"/>
<detail-comment-info ref="comment" :comment-info="commentInfo"/>
<goods-list ref="recommond" :goods="recommends"/>
</scroll>
</div>
</template>
<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import {getDetail, getRecommend, Goods, Shop, GoodsParam} from 'network/detail'
import { itemListenerMixin } from 'common/mixin'
export default {
name: 'Detail',
components: {
DetailNavBar,
DetailSwiper,
DetailBaseInfo,
DetailShopInfo,
DetailGoodsInfo,
DetailParamInfo,
DetailCommentInfo,
Scroll,
GoodsList
},
mixins: [itemListenerMixin],
data() {
return {
iid: null,
topImages: [],
goods: {},
shop: {},
detailInfo: {},
paramInfo: {},
commentInfo: {},
recommends: []
}
},
methods: {
imageLoad() {
this.$refs.scroll.refresh()
},
titleClick(index) {
if (index === 0) {
this.$refs.scroll.scrollToElement(this.$refs.swiper.$el)
} else if (index === 1) {
this.$refs.scroll.scrollToElement(this.$refs.param.$el)
} else if (index === 2) {
this.$refs.scroll.scrollToElement(this.$refs.comment.$el)
} else if (index === 3) {
this.$refs.scroll.scrollToElement(this.$refs.recommond.$el)
}
}
},
created() {
// 1. 保存传入的iid
this.iid = this.$route.params.iid
// 2. 根据iid请求详情数据
getDetail(this.iid).then(res => {
const data = res.result
// 1. 获取顶部的图片轮播数据
this.topImages = data.itemInfo.topImages
// 2. 获取商品信息
this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
// 3. 创建店铺信息的对象
this.shop = new Shop(data.shopInfo)
// 4. 保存商品的详情数据
this.detailInfo = data.detailInfo
// 5. 获取参数的信息
this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
// 6. 取出评论的信息
if (data.rate.cRate !== 0) {
this.commentInfo = data.rate.list[0]
}
// 初始化scroll
this.$nextTick(() => {
this.$refs.scroll.createScroll()
})
})
// 3. 请求推荐数据
getRecommend().then(res => {
this.recommends = res.data.list
})
}
}
</script>
<style scoped>
#detail {
position: relative;
z-index: 9;
background-color: #fff;
height: 100vh;
}
.detail-nav {
position: relative;
z-index: 9;
background-color: #fff;
}
.detail-scroll-content {
height: calc(100% - 44px);
}
</style>
浙公网安备 33010602011771号