注意：在模拟器用鼠标滚动是不会切换光标的，因为使用的是触摸滑动。【自定义类型贴在最后了】
script 部分如下：
import { onMounted } from 'vue'
import type { orderDetail } from '@/types/category'
import type { mainArr } from '@/types/main-arr'
import { nextTick, ref } from 'vue'
import { getCurrentInstance } from 'vue'
//页面加载
onMounted(async () => {
await getListData()
})
//#region 左右联动菜单
const instance = getCurrentInstance()
//分类列表数据--可以多写几个
const categoryList = [
{
id: '1',
name: '即食',
picture: 'el-icon-chicken',
children: [
{
deveicId: 1,
memo: '泸州老窖特曲浓香型白酒',
discount: 100,
id: 2,
inventory: 3,
goodsName: '草莓',
orderNum: 1,
goodsPicPath: '/static/images/locate.png',
price: 8.0,
orderMoney: 0,
oldPrice: 0,
isLimitPromotion: false,
},
],
},
]
const mainArray = ref<mainArr>([]) //右侧显示内容（标题+文本）
const topArr = ref<any[]>([]) //每个锚点与到顶部距离
const leftIndex = ref(0) //左边光标index
const isMainScroll = ref<boolean>(false) // 是否touch到右侧
const scrollInto = ref('') //锚点
/* 获取列表数据 */
const getListData = async () => {
const left = ref<string[]>([])
const main = ref<mainArr>([])
categoryList.forEach((item) => {
left.value.push(`${item.id + 1}类商品`)
let list: orderDetail[] = []
// for (let i = 0; i < 10; i++)
item.children.forEach((itm) => {
list.push(itm)
})
main.value.push({
title: item.name,
list,
})
})
mainArray.value = main.value
await nextTick(() => {
setTimeout(() => {
getElementTop()
}, 10)
})
}
//获取距离顶部的高度
const getScrollTop = (selector: string) => {
const top = new Promise((resolve, reject) => {
let query = uni.createSelectorQuery().in(instance)
query
.select(selector)
.boundingClientRect((data: any) => {
resolve(data.top)
})
.exec()
})
return top
}
/* 获取元素顶部信息 */
const getElementTop = async () => {
/* Promise 对象数组 */
let p_arr: number[] = []
/* 遍历数据，创建相应的 Promise 数组数据 */
for (let i = 0; i < mainArray.value.length; i++) {
const resu = await getScrollTop(`#item-${i}`)
p_arr.push(Number(resu) - 200)
}
/* 主区域滚动容器的顶部距离 */
getScrollTop('#scroll-el').then((res: any) => {
let top = res
// #ifdef H5
top += 43 //因固定提示块的需求，H5的默认标题栏是44px
// #endif
/* 所有节点信息返回后调用该方法 */
Promise.all(p_arr).then((data) => {
topArr.value = data
})
})
}
/* 主区域滚动监听 */
const mainScroll = (e: { detail: { scrollTop: any } }) => {
if (!isMainScroll.value) {
return
}
let top = e.detail.scrollTop
let index = -1
if (top >= topArr.value[topArr.value.length - 1]) {
index = topArr.value.length - 1
} else {
index = topArr.value.findIndex((item: any, index: number) => {
return topArr.value[index + 1] >= top
})
}
leftIndex.value = index < 0 ? 0 : index
}
/* 主区域触摸 */
const mainTouch = () => {
isMainScroll.value = true
}
/* 左侧导航点击 */
const leftTap = (e: any) => {
let index = e.currentTarget.dataset.index
isMainScroll.value = false
leftIndex.value = Number(index)
scrollInto.value = `item-${index}`
}
//#endregiontemplate部分如下：
<view class="content" >
<view class="list_box">
<!-- 菜单左边 -->
<view class="left">
<scroll-view scroll-y class="scroll">
<view
class="item"
v-for="(item, index) in categoryList"
:key="index"
:class="{ active: index == leftIndex }"
:data-index="index"
@tap="leftTap($event)"
>
{{ item.name }}
</view>
</scroll-view>
</view>
<view class="main">
<scroll-view
scroll-y
@scroll="mainScroll"
class="scroll"
:scroll-into-view="scrollInto"
:scroll-with-animation="true"
@touchstart="mainTouch"
id="scroll-el"
enhanced
:show-scrollbar="false"
>
<view v-for="(item, index) in mainArray" class="item-first-box" :key="index">
<view :id="'item-' + index">
<text class="item-first-title">{{ item.title }}</text>
<view class="item-first-content" v-for="(goods, index2) in item.list" :key="index2">
<view class="goods-image-box">
<image
:src="goods.goodsPicPath"
mode="aspectFill"
class="goods-image"
/>
</view>
<view class="meta">
<view>
<view class="name ellipsis">{{ goods.goodsName }}</view>
<view class="memo">{{ goods.memo }}</view>
<view class="activity-tips" v-if="goods.isLimitPromotion">限时优惠</view>
</view>
<view class="price">
<view>
<view class="actual">
<text class="symbol">¥</text>
<text>{{ goods.price.toFixed(2) }}</text>
</view>
<view
class="oldprice"
v-if="goods.oldPrice != 0 && goods.price < goods.oldPrice"
>
<text class="symbol">¥</text>
<text>{{ goods.oldPrice!.toFixed(2) }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view style="height: 80%"></view>
</scroll-view>
</view>
</view>
</view>scss样式：
page {
height: 100%;
overflow: hidden;
background: #f6f6f6;
}
.content {
.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 - 380rpx);
.left {
width: 200rpx;
text-align: center;
background-color: #f6f6f6;
line-height: 100rpx;
box-sizing: border-box;
font-size: 32rpx;
color: #666;
height: 100%;
.item {
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: #000000;
background-color: #fff;
}
}
}
.main {
height: 100%;
background-color: #fff;
padding: 0 20rpx;
flex-grow: 1;
box-sizing: border-box;
.item-first-box {
position: relative;
padding-top: 20rpx;
width: 100%;
}
.item-first-title {
position: relative;
margin-top: 20rpx;
}
.item-first-content {
position: relative;
padding-top: 20rpx;
margin-bottom: 20rpx;
height: 180rpx;
.goods-image-box {
width: 200rpx;
position: relative;
float: left;
z-index: 999;
}
.goods-image {
position: relative;
width: 170rpx;
height: 170rpx;
border-radius: 10rpx;
}
.goods-inventory {
width: 170rpx;
height: 36rpx;
border-radius: 0 0 10rpx 10rpx;
margin-right: 20rpx;
opacity: 60%;
background-color: #5c9888;
position: absolute;
bottom: 0rpx;
left: 0;
font-size: 24rpx;
color: white;
text-align: center;
}
.goods-inventory-notenough {
position: absolute;
width: 170rpx;
text-align: center;
font-size: 22rpx;
bottom: 4rpx;
left: 0;
color: white;
}
.goods-inventory-zero {
position: absolute;
width: 170rpx;
text-align: center;
font-size: 22rpx;
bottom: 4rpx;
left: 0;
color: white;
}
}
.meta {
position: relative;
display: inline;
}
.name {
height: 40rpx;
font-size: 26rpx;
color: #444;
font-weight: bold;
}
.memo {
display: flex;
margin-top: 6rpx;
font-size: 22rpx;
color: #888;
}
.activity-tips {
display: flex;
margin-top: 15rpx;
font-size: 22rpx;
background-color: #ffd8cb;
color: #fc6d3f;
border-radius: 10rpx;
padding-left: 10rpx;
padding-right: 10rpx;
width: 110rpx;
}
.type {
line-height: 1.8;
padding: 0 15rpx;
font-size: 24rpx;
align-self: flex-start;
border-radius: 4rpx;
color: #888;
background-color: #f7f7f8;
}
.price {
display: flex;
position: relative;
margin-top: 16rpx;
font-size: 24rpx;
.actual {
color: #444;
margin-top: 2rpx;
margin-left: 0rpx;
float: left;
}
.oldprice {
display: inline-block;
font-size: 24rpx;
margin-top: 2rpx;
color: #999;
margin-left: 10rpx;
text-decoration: line-through;
}
.symbol {
font-size: 24rpx;
}
.quantity {
position: absolute;
top: 0;
right: 0;
font-size: 24rpx;
color: #444;
z-index: 999999999;
}
}
.right-scroll:last-child {
border-bottom: 0;
}
}
.scroll {
height: 100%;
}
}
}category.d.ts
/** 通用商品类型 */
export type GoodsItem = {
deveicId?: number
/** 商品描述 */
memo: string
/** 商品折扣 */
discount: number
/** id */
id: number
/**库存 */
inventory: number
/** 商品名称 */
goodsName: string
/** 商品已下单数量 */
orderNum: number
/** 商品图片 */
goodsPicPath: string
/** 商品价格 */
price: number
/** 商品原价格 */
oldPrice?: number
/**促销id */
promotionDetialId?: number
/**是否是限时优惠 */
isLimitPromotion: boolean
orderMoney:number
oldPrice:number
}main-arr.d.ts
export type main = {
title: string
list: orderDetail[]
}
export type mainArr = main[]