当前位置：首页 > news >正文

uniapp开发小程序—scroll-view实现内容滚动时，标题也滚动

news 来源：原创 2024/5/9 19:17:29

一、需求

scroll-view实现内容滚动时，标题也滚动

二、效果

在这里插入图片描述

三、代码实现

<template><view class="content"><view class="head">头部固定区域</view><view class="list_box"><!-- 菜单左边 --><view class="left"><scroll-view scroll-y="true" class="scroll"><view class="item" v-for="(item,index) in leftArray" :key="index":class="{ 'active':index==leftIndex }" :data-index="index" @tap="leftTap">{{item.id}}</view></scroll-view></view><!-- 右侧内容部分 --><view class="main"><scroll-view scroll-y="true" @scroll="mainScroll" class="scroll" :scroll-into-view="scrollInto":scroll-with-animation="true" @touchstart="mainTouch" id="scroll-el"><block v-for="(item,index) in mainArray" :key="index"><scroll-view class="right-scroll"  :id="'item-'+index"><!-- :scroll-x="true" 加上可以横向滑动 --><block v-for="(item2,index2) in item.list" :key="index2"><view class="item"><view class="goods"><view>左边是第{{ index + 1 }}个</view><view>右边是第{{ index2+1 }}个</view></view></view></block></scroll-view></block></scroll-view></view></view></view>
</template><script>export default {data() {return {leftArray: [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5},{id: 6},{id: 7},{id: 8},],mainArray: [],topArr: [],leftIndex: 0,isMainScroll: false,scrollInto: ''}},mounted() {this.getListData();},methods: {/* 获取列表数据 */getListData() {/* 因无真实数据，当前方法模拟数据 */let [left, main] = [[],[]];for (let i = 0; i < 8; i++) {left.push(`${i+1}类商品`);let list = [];for (let j = 0; j < (i + 1); j++) {list.push(j);}main.push({title: `第${i+1}类商品标题`,list})}this.mainArray = main;this.$nextTick(() => {setTimeout(() => {this.getElementTop();}, 10)});},//获取距离顶部的高度getScrollTop(selector) {return new Promise((resolve, reject) => {let query = uni.createSelectorQuery().in(this);query.select(selector).boundingClientRect(data => {resolve(data.top)}).exec();})},/* 获取元素顶部信息 */async getElementTop() {/* Promise 对象数组 */let p_arr = [];/* 遍历数据，创建相应的 Promise 数组数据 */for (let i = 0; i < this.mainArray.length; i++) {const resu = await this.getScrollTop(`#item-${i}`)p_arr.push(resu - 200)}/* 主区域滚动容器的顶部距离 */this.getScrollTop("#scroll-el").then((res) => {let top = res;// #ifdef H5top += 43; //因固定提示块的需求，H5的默认标题栏是44px// #endif/* 所有节点信息返回后调用该方法 */Promise.all(p_arr).then((data) => {this.topArr = data;});})},/* 主区域滚动监听 */mainScroll(e) {if (!this.isMainScroll) {return;}let top = e.detail.scrollTop;let index = -1;if (top >= this.topArr[this.topArr.length - 1]) {index = this.topArr.length - 1;} else {index = this.topArr.findIndex((item, index) => {return this.topArr[index + 1] >= top;});}this.leftIndex = (index < 0 ? 0 : index);// console.log('打印',this.leftIndex)},/* 主区域触摸 */mainTouch() {this.isMainScroll = true;},/* 左侧导航点击 */leftTap(e) {let index = e.currentTarget.dataset.index;this.isMainScroll = false;this.leftIndex = Number(index);this.scrollInto = `item-${index}`;}}}
</script><style lang="scss" scoped>.content {.head {width: 100%;height: 400rpx;background-color: pink;display: flex;align-items: center;justify-content: center;}.list_box {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: flex-start;align-content: flex-start;font-size: 28rpx;height: calc(100vh - 400rpx);.left {width: 200rpx;background-color: orange;line-height: 80rpx;box-sizing: border-box;font-size: 32rpx;height: 100%;.item {padding-left: 20rpx;position: relative;&:not(:first-child) {margin-top: 1px;&::after {content: '';display: block;height: 0;border-top: #d6d6d6 solid 1px;width: 620upx;position: absolute;top: -1px;right: 0;transform: scaleY(0.5);}}&.active,&:active {color: #42b983;background-color: #fff;}}}.main {height: 100%;background-color: #fff;padding: 0 20rpx;width: 0;flex-grow: 1;box-sizing: border-box;.tips {line-height: 64rpx;font-size: 24rpx;font-weight: bold;color: #666;height: 64rpx;position: fixed;top: 44px;right: 0;width: 530rpx;z-index: 10;background-color: #fff;padding-left: 10rpx;}.right-scroll {height: calc(100vh - 400rpx);width: 100%;background-color: #efba21;border-bottom: 2rpx solid #fff;/* 横向滚动 */white-space: nowrap;flex-direction: row;.item {width: 100%;height: 100%;/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */display: inline-flex;.goods {width: 100%;height: 100%;padding: 20rpx;box-sizing: border-box;background-color: #42b983;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: center;align-content: center;margin-bottom: 10rpx;border-right: 2rpx solid #fff;}.goods:last-child {border-right: 0;}}}.right-scroll:last-child {border-bottom: 0;}}.scroll {height: 100%;}}}
</style>