在 UniApp 中实现类似某团点餐页面的布局效果（顶部选项吸顶，左侧导航吸顶，右侧内容滚动），可以通过以下步骤实现。我们将使用u-sticky 布局和 onPageScroll 事件来实现吸顶效果。
实现思路
顶部选项吸顶
使用使用uview类型的吸顶组件u-sticky 实现顶部选项的吸顶效果。
左侧导航吸顶
使用u-sticky实现左侧导航的滚动。
计算内容区分类所在top的位置
右侧内容滚动
监听通过页面 onPageScroll 滚动事件动态计算左侧导航的吸顶位置。联动左侧导航的高亮状态。
左侧导航滚动至对应的内容区
点击左侧导航自定义方法实现点击事件调用uni.pageScrollTo来滚动至所在位置
代码生成器
<template>
<view v-if="globalData.isshow" class="container container329152">
<u-navbar :isSlot="true" :isFixed="true" :isMarginRight="false" :borderBottom="false" :background="headerBackgroundStyle" title="" :backTextStyle="{ color: 'inherit' }" backIconColor="#fff" titleColor="inherit" :isHome="false" :isBack="false">
<view :background="headerBackgroundStyle" class="flex align-center diygw-text-md text-bold align-center flex-nowrap diygw-col-24 flexbar-clz">
<text class="flex icon1 diygw-col-0 icon1-clz diy-icon-back"></text>
<text class="diygw-col-0 text13-clz"> DIY可视化店铺 </text>
<text class="flex icon2 diygw-col-0 icon2-clz diy-icon-search"></text>
<text class="flex icon3 diygw-col-0 icon3-clz diy-icon-weixin"></text>
<!-- #ifdef MP -->
<text class="diygw-col-0 text1-clz"> </text>
<!-- #endif -->
</view>
</u-navbar>
<image src="/static/t1.jpg" class="response diygw-col-24 image2-clz" mode="widthFix"></image>
<view v-if="data.total > 0" class="flex flex-wrap diygw-col-24 items-stretch flex14-clz">
<view class="flex flex-wrap diygw-col-0 flex-direction-column items-start">
<image src="/static/p1.png" class="image1-size diygw-image diygw-col-0" mode="widthFix"></image>
</view>
<view class="flex flex-wrap diygw-col-0 flex-direction-column flex9-clz">
<view class="flex flex-wrap diygw-col-24 justify-between items-center">
<text class="diygw-col-0 text12-clz"> DIY可视化店铺 </text>
<text class="flex icon diygw-col-0 diy-icon-share"></text>
</view>
<text class="diygw-col-0"> DIY可视化整合购物车DIY可视化整合购物车DIY可视化整合购物车DIY可视化整合购物车 </text>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 flex-direction-column" style="z-index: 1001">
<u-sticky bgColor="none" style="width: 100%; overflow: hidden" :h5NavHeight="0" :isStatusBarHeight="true" :offset-top="90">
<view class="flex diy-sticky-100 flex-wrap diygw-col-24 justify-center flex18-clz">
<view v-for="(item, index) in tabDatas" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex19-clz" @tap="tabClick(index)">
<view class="flex flex-wrap diygw-col-0 items-center">
<text v-if="tabIndex == index" class="diygw-text-line1 diygw-col-0 text6-clz">
{{ item.title }}
</text>
<text v-if="tabIndex != index" class="diygw-text-line1 diygw-col-0 text7-clz">
{{ item.title }}
</text>
<text v-if="item.number" class="diygw-text-line1 diygw-col-0 text9-clz">
{{ item.number }}
</text>
</view>
<image v-if="tabIndex == index" src="/static/lj12.png" class="image4-size diygw-image diygw-col-0 image4-clz" mode="widthFix"></image>
</view>
<view class="clearfix"></view>
</view>
<view class="clearfix"></view>
</u-sticky>
</view>
<view v-show="tabIndex == 0" class="flex flex-wrap diygw-col-24 items-stretch">
<view class="flex flex-wrap diygw-col-24 flex-direction-column" style="z-index: 1001; width: 180rpx !important">
<u-sticky bgColor="none" style="width: 100%; overflow: hidden" :h5NavHeight="0" :isStatusBarHeight="true" :offset-top="170">
<view class="flex diy-sticky-100 flex-wrap diygw-col-0 flex-direction-column flex21-clz">
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
<view :style="{ background: tabsIndex == index ? '#fff' : 'transparent' }" v-for="(item, index) in data.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex23-clz" @tap="tabsClick(item, index)">
<view class="flex flex-wrap diygw-col-24">
<text v-if="tabsIndex != index" class="diygw-col-0 text15-clz">
{{ item.title }}
</text>
<text v-if="tabsIndex == index" class="diygw-col-0 text16-clz">
{{ item.title }}
</text>
</view>
</view>
</view>
<view class="clearfix"></view>
</view>
<view class="clearfix"></view>
</u-sticky>
</view>
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex25-clz">
<view :id="'tabs-content-' + index" v-for="(item, index) in data.rows" :key="index" class="flex flex-wrap diygw-col-0 flex-direction-column">
<text class="diygw-col-24 text10-clz">
{{ item.title }}
</text>
<view v-for="(childItem, childIndex) in item.children" :key="childIndex" class="flex flex-wrap diygw-col-24 items-stretch flex27-clz">
<view class="flex flex-wrap diygw-col-0 items-center">
<image :src="childItem.img" class="image5-size diygw-image diygw-col-0" mode="widthFix"></image>
</view>
<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center flex29-clz">
<view class="flex flex-wrap diygw-col-24 items-center flex30-clz">
<text class="diygw-col-0">
{{ childItem.title }}
</text>
</view>
<view class="flex flex-wrap diygw-col-24 items-center flex31-clz">
<text class="diygw-col-0">
{{ childItem.remark }}
</text>
</view>
<view class="flex diygw-col-24 justify-between items-center flex-nowrap">
<view class="flex diygw-col-0 justify-between items-baseline flex-nowrap flex33-clz">
<text class="diygw-col-0"> ￥ </text>
<text class="diygw-col-0 text23-clz">
{{ childItem.price }}
</text>
</view>
<u-form-item :borderBottom="false" :isHideMin="true" class="diygw-col-0 diygw-form-item-small" labelPosition="top" prop="number">
<view class="flex diygw-col-24">
<u-number-box :isBtnRadius="true" :inputHeight="48" inpubBgColor="#ffffff" inputColor="#000000" @change="changeChildItemNumber($event, childIndex, childItem)" name="number" v-model="childItem.number" bgColor="#edc000" color="#ffffff" :min="0" isHideMin :max="100" :step="1" />
</view>
</u-form-item>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="tabIndex == 2" class="flex flex-wrap diygw-col-24 flex-direction-column">
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex39-clz">
<text class="diygw-col-0 text45-clz"> 商家信息 </text>
<view class="flex flex-wrap diygw-col-24 items-center flex40-clz">
<text class="flex icon4 diygw-col-0 diy-icon-location"></text>
<text class="diygw-col-0 text31-clz"> 广东省中山市东区街道 中山市东区街道 中山市东区街道 中山市东区街道 </text>
</view>
<view class="flex flex-wrap diygw-col-24 items-center flex44-clz">
<text class="flex icon7 diygw-col-0 diy-icon-list"></text>
<text class="diygw-col-0 text34-clz"> 门店类目： 米粉米线 </text>
</view>
<view class="flex flex-wrap diygw-col-24 items-center flex42-clz">
<text class="flex icon5 diygw-col-0 diy-icon-time"></text>
<text class="diygw-col-0 text32-clz"> 营业时间：星期一、 星期二、 星期三、星期四、 星期五、 星期六 10:30至20:00 </text>
</view>
<view class="flex flex-wrap diygw-col-24 items-center flex43-clz">
<text class="flex icon6 diygw-col-0 diy-icon-phone"></text>
<text class="diygw-col-0 text33-clz"> 联系电话： 15913132246 </text>
</view>
<view class="flex flex-wrap diygw-col-24 items-center flex45-clz">
<text class="flex icon8 diygw-col-0 diy-icon-brand"></text>
<text class="diygw-col-0 text35-clz"> 查看营业资质 </text>
<text class="flex icon9 diygw-col-0 diy-icon-right"></text>
</view>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex41-clz"> </view>
<view v-if="data.total > 0" id="bottom" class="flex flex-wrap diygw-col-24 justify-between items-center diygw-bottom flex4-clz">
<image src="/static/ps.png" class="image3-size diygw-image diygw-col-0 image3-clz" mode="widthFix"></image>
<text v-if="globalData.totalNumber > 0" class="diygw-col-0 text17-clz">
{{ globalData.totalNumber }}
</text>
<view v-if="data.total > 0" class="flex flex-wrap diygw-col-24 justify-between items-stretch flex8-clz">
<view class="flex flex-wrap diygw-col-0 flex-direction-column items-baseline flex12-clz">
<view class="flex flex-wrap diygw-col-0 items-baseline flex11-clz">
<text class="diygw-col-0"> ￥ </text>
<text class="diygw-col-0 text19-clz">
{{ globalData.totalPrice }}
</text>
</view>
<view class="flex flex-wrap diygw-col-0 items-baseline flex5-clz">
<text class="diygw-col-0"> 配送货：￥ </text>
<text class="diygw-col-0">
{{ globalData.totalYunfei }}
</text>
</view>
</view>
<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex13-clz">
<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
<text class="diygw-col-0"> 去结算 </text>
</view>
</view>
</view>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { isshow: false, totalNumber: 0, totalPrice: 0, totalYunfei: 0, selectProducts: [] },
data: {
rows: [
{
id: 0,
title: '',
orderindex: 0,
img: '',
parentId: null,
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null,
children: [
{
id: 0,
title: '',
remark: '',
img: '',
flid: 0,
content: '',
createTime: '',
updateTime: '',
deleteTime: null,
number: 0,
price: 0
}
]
}
],
total: 0,
code: 0,
msg: ''
},
headerBackgroundStyle: { background: 'none !important' },
scrollTop: 0,
offsetScrollTop: 90,
isScrolling: false,
tabIndex: 0,
tabDatas: [{ title: '点菜' }, { title: '评价', number: 20 }, { title: '店铺' }],
tabsIndex: 0,
headerBackgroundStyle: { background: 'none !important' },
childItem: {
number: 1
}
};
},
onPageScroll(e) {
const scrollTop = e.scrollTop;
this.headerBackgroundStyle = this.headerBackgroundStyle || { background: 'none' };
if (scrollTop <= 80) {
const opacity = scrollTop / 100;
const color = `rgba(255, 255, 255, ${opacity})`;
this.headerBackgroundStyle.background = color;
} else {
this.headerBackgroundStyle.background = '#ffffff';
}
this.$nextTick(() => {
//如果是用户点击滚动的不操作
if (!this.isScrolling) {
if (this.tabIndex == 0) {
this.scrollTop = scrollTop;
}
for (let index = 0; index < this.data.rows.length; index++) {
if (scrollTop > this.data.rows[index].scrollTop - this.offsetScrollTop) {
if ((this.data.rows.length > index + 1 && scrollTop < this.data.rows[index + 1].scrollTop) || index == this.data.rows.length - 1) {
this.tabsIndex = index;
}
}
}
}
});
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {
await this.dataApi();
},
// 获取产品数据 API请求方法
async dataApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '';
let http_data = {};
let http_header = {};
let data = await this.$http.post(http_url, http_data, http_header, 'json');
//获取是不是设置了购物车本地数据，如果设置了，获取并对返回的数据进行设置数量
let products = this.$session.getUserValue('products');
if (products && products.length > 0) {
let productDatas = {};
products.forEach((item) => {
productDatas[item.id] = item.number;
});
data.rows.forEach((item) => {
item.children.forEach((childItem) => {
if (productDatas[childItem.id]) {
childItem.number = productDatas[childItem.id];
} else {
childItem.number = 0;
}
});
});
this.totalFunction({});
}
this.data = data;
this.globalData.isshow = true;
setTimeout(() => {
this.data.rows.forEach((item, index) => {
uni.createSelectorQuery()
.in(this)
.select('#tabs-content-' + index)
.boundingClientRect((data) => {
if (data != null) {
let top = data.top;
item.scrollTop = top;
} else {
console.log('#tabs-content-' + index + ' data error');
}
})
.exec();
});
}, 200);
},
// 计算总价 自定义方法
async totalFunction(param) {
let thiz = this;
let number = 0;
let price = 0;
let products = [];
this.data.rows.forEach((item) => {
let children = item.children.filter((childItem) => {
return childItem.number > 0;
});
products = products.concat(children);
});
products.forEach((childItem) => {
number = childItem.number + number;
price = childItem.number * childItem.price + price;
});
this.globalData.selectProducts = products;
this.globalData.totalNumber = number;
this.globalData.totalPrice = price;
},
// 设置购物车选择数据 自定义方法
async buyFunction(param) {
let thiz = this;
this.$session.setUserValue('products', this.globalData.selectProducts);
this.navigateTo({
type: 'tip',
tip: '请前往自定义方法，设置购物车选择数据方法处理'
});
},
tabClick(index) {
this.tabIndex = index;
if (index == 0) {
let thiz = this;
thiz.isScrolling = true;
setTimeout(() => {
uni.pageScrollTo({
scrollTop: this.scrollTop,
duration: 0,
complete() {
setTimeout(() => {
thiz.isScrolling = false;
}, 500);
}
});
}, 500);
}
},
tabsClick(item, index) {
this.tabsIndex = index;
let thiz = this;
thiz.isScrolling = true;
uni.pageScrollTo({
scrollTop: this.data.rows[index].scrollTop - this.offsetScrollTop,
duration: 300,
complete() {
setTimeout(() => {
thiz.isScrolling = false;
}, 500);
}
});
},
changeChildItemNumber(evt, childIndex, childItem) {
this.navigateTo({ foritem: childItem, forindex: childIndex, type: 'totalFunction' });
}
}
};
</script>
<style lang="scss" scoped>
.flexbar-clz {
z-index: 1;
}
.icon1-clz {
padding-top: 10rpx;
border-bottom-left-radius: 120rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-right-radius: 120rpx;
margin-right: 10rpx;
background-color: #ffffff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: 52rpx !important;
border-top-left-radius: 120rpx;
margin-top: 10rpx;
border-bottom-right-radius: 120rpx;
margin-bottom: 10rpx;
height: 52rpx !important;
padding-right: 10rpx;
}
.icon1 {
font-size: 32rpx;
}
.text13-clz {
flex: 1;
text-align: left;
}
.icon2-clz {
padding-top: 10rpx;
border-bottom-left-radius: 120rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-right-radius: 120rpx;
margin-right: 10rpx;
background-color: #ffffff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: 52rpx !important;
border-top-left-radius: 120rpx;
margin-top: 10rpx;
border-bottom-right-radius: 120rpx;
margin-bottom: 10rpx;
height: 52rpx !important;
padding-right: 10rpx;
}
.icon2 {
font-size: 32rpx;
}
.icon3-clz {
padding-top: 6rpx;
border-bottom-left-radius: 120rpx;
color: #67ac43;
padding-left: 8rpx;
padding-bottom: 6rpx;
border-top-right-radius: 120rpx;
margin-right: 10rpx;
background-color: #ffffff;
margin-left: 10rpx;
flex-shrink: 0;
overflow: hidden;
width: 52rpx !important;
border-top-left-radius: 120rpx;
margin-top: 10rpx;
border-bottom-right-radius: 120rpx;
margin-bottom: 10rpx;
height: 52rpx !important;
padding-right: 8rpx;
}
.icon3 {
font-size: 36rpx;
}
.text1-clz {
flex-shrink: 0;
width: 160rpx !important;
text-align: left;
}
.image2-clz {
top: 0rpx;
left: 0rpx;
position: absolute;
}
.flex14-clz {
padding-top: 20rpx;
border-bottom-left-radius: 20rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
border-top-right-radius: 20rpx;
margin-right: 20rpx;
background-color: #ffffff;
margin-left: 20rpx;
box-shadow: 0rpx 2rpx 22rpx rgba(31, 31, 31, 0.16);
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 20rpx;
margin-top: 30rpx;
border-bottom-right-radius: 20rpx;
margin-bottom: 20rpx;
padding-right: 20rpx;
}
.image1-size {
height: 180rpx !important;
width: 180rpx !important;
}
.flex9-clz {
flex: 1;
}
.text12-clz {
font-weight: bold;
font-size: 28rpx !important;
}
.icon {
font-size: 48rpx;
}
.flex18-clz {
padding-top: 16rpx;
padding-left: 10rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #eee;
height: 80rpx;
padding-right: 10rpx;
}
.flex19-clz {
padding-top: 0rpx;
padding-left: 20rpx;
padding-bottom: 0rpx;
padding-right: 20rpx;
}
.text6-clz {
background-repeat: no-repeat;
z-index: 1;
font-weight: bold;
font-size: 32rpx !important;
background-position: top center;
}
.text7-clz {
background-repeat: no-repeat;
z-index: 1;
font-size: 32rpx !important;
background-position: top center;
}
.text9-clz {
padding-top: 0rpx;
padding-left: 10rpx;
padding-bottom: 0rpx;
padding-right: 10rpx;
}
.image4-clz {
margin-left: 0rpx;
margin-top: -10rpx;
margin-bottom: 0rpx;
margin-right: 0rpx;
}
.image4-size {
height: 16rpx !important;
width: 60rpx !important;
}
.flex21-clz {
background-color: #eaeaea;
flex-shrink: 0;
width: 180rpx !important;
}
.flex1-clz {
height: calc(100vh - 85px);
}
.flex23-clz {
padding-top: 24rpx;
padding-left: 0rpx;
padding-bottom: 24rpx;
padding-right: 0rpx;
}
.text15-clz {
padding-top: 0rpx;
border-left: 6rpx solid #eaeaea;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 0rpx;
padding-right: 10rpx;
}
.text16-clz {
padding-top: 0rpx;
border-left: 6rpx solid #f3c100;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 0rpx;
padding-right: 10rpx;
}
.flex25-clz {
z-index: 2;
flex: 1;
}
.text10-clz {
margin-left: 10rpx;
font-weight: bold;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.flex27-clz {
border: 2rpx solid #f3f3f3;
padding-top: 10rpx;
border-bottom-left-radius: 20rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-right-radius: 20rpx;
margin-right: 10rpx;
background-color: #ffffff;
margin-left: 10rpx;
box-shadow: 0rpx 0rpx 6rpx 1px rgba(219, 219, 219, 0.12);
overflow: hidden;
width: calc(100% - 10rpx - 10rpx) !important;
border-top-left-radius: 20rpx;
margin-top: 10rpx;
border-bottom-right-radius: 20rpx;
margin-bottom: 10rpx;
padding-right: 10rpx;
}
.image5-size {
height: 160rpx !important;
width: 160rpx !important;
}
.flex29-clz {
flex: 1;
}
.flex30-clz {
padding-top: 10rpx;
font-weight: bold;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex31-clz {
padding-top: 10rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex33-clz {
font-weight: bold;
}
.text23-clz {
font-size: 28rpx !important;
}
.flex39-clz {
padding-top: 20rpx;
border-bottom-left-radius: 12rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
border-top-right-radius: 12rpx;
margin-right: 20rpx;
background-color: #ffffff;
margin-left: 20rpx;
box-shadow: 0rpx 2rpx 10rpx 5px rgba(206, 205, 205, 0.08);
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 20rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 20rpx;
padding-right: 20rpx;
}
.text45-clz {
padding-top: 16rpx;
font-weight: bold;
padding-left: 0rpx;
font-size: 28rpx !important;
padding-bottom: 16rpx;
padding-right: 0rpx;
}
.flex40-clz {
padding-top: 16rpx;
padding-left: 0rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #eee;
padding-right: 0rpx;
}
.icon4 {
font-size: 40rpx;
}
.text31-clz {
flex: 1;
}
.flex44-clz {
padding-top: 16rpx;
padding-left: 0rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #eee;
padding-right: 0rpx;
}
.icon7 {
font-size: 40rpx;
}
.text34-clz {
flex: 1;
}
.flex42-clz {
padding-top: 16rpx;
padding-left: 0rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #eee;
padding-right: 0rpx;
}
.icon5 {
font-size: 40rpx;
}
.text32-clz {
flex: 1;
}
.flex43-clz {
padding-top: 16rpx;
padding-left: 0rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #eee;
padding-right: 0rpx;
}
.icon6 {
font-size: 40rpx;
}
.text33-clz {
flex: 1;
}
.flex45-clz {
padding-top: 16rpx;
padding-left: 0rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #eee;
padding-right: 0rpx;
}
.icon8 {
font-size: 40rpx;
}
.text35-clz {
flex: 1;
}
.icon9 {
font-size: 40rpx;
}
.flex41-clz {
height: 160rpx;
}
.flex4-clz {
background-color: rgba(255, 255, 255, 0);
padding-top: 16rpx;
left: 0rpx;
bottom: 0rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
padding-right: 16rpx;
}
.image3-clz {
z-index: 1;
left: 20rpx;
bottom: 10rpx;
position: absolute;
}
.image3-size {
height: 152rpx !important;
width: 120rpx !important;
}
.text17-clz {
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
z-index: 1;
color: #ffffff;
font-weight: bold;
padding-left: 12rpx;
font-size: 26rpx !important;
padding-bottom: 8rpx;
border-top-right-radius: 100rpx;
margin-right: 20rpx;
background-color: #e00909;
margin-left: 0rpx;
overflow: hidden;
top: 0rpx;
left: 130rpx;
border-top-left-radius: 100rpx;
margin-top: 0rpx;
border-bottom-right-radius: 100rpx;
position: absolute;
margin-bottom: 0rpx;
padding-right: 16rpx;
}
.flex8-clz {
border-top: 2rpx solid #eee;
border-bottom-left-radius: 20rpx;
box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
overflow: hidden;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.flex12-clz {
background-color: #333333;
padding-top: 10rpx;
color: #ffffff;
flex: 1;
padding-left: 170rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex11-clz {
color: #ffffff;
}
.text19-clz {
margin-left: 0rpx;
font-weight: bold;
font-size: 48rpx !important;
margin-top: 0rpx;
margin-bottom: 0rpx;
margin-right: 20rpx;
}
.flex5-clz {
color: #ffffff;
}
.flex13-clz {
background-color: #fbd62d;
padding-top: 10rpx;
font-weight: bold;
padding-left: 40rpx;
font-size: 32rpx !important;
padding-bottom: 10rpx;
padding-right: 40rpx;
}
.container329152 {
padding-bottom: 200rpx;
}
</style>
功能总结
-
顶部选项会固定在页面顶部。
-
左侧导航会固定在页面左侧，点击左侧导航时，右侧内容会滚动到对应区域。
-
右侧内容滚动时，左侧导航的高亮状态会同步更新。
扫一扫
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
