cashier_weapp/pages/index/index.vue

<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="navbar" :class="{active:opacity}">
			<!-- #ifndef APP-PLUS || MP-WEIXIN -->
			<view class="status-bar"></view>
			<view class="navbar_tow flex-between"
				:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
			<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="status-bar"></view>
				<view class="navbar_tow flex-between">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="navbar_tow flex-between"
						:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
					<!-- #endif -->
						<!-- 标题搜索框 -->
						<view class="flex-between">
							<view class="navbar_tow_one flex-start" @click="uindexlist">
								<text>美味抢先点</text>
								<text>西安</text>
								<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
									size="16"></u-icon>
							</view>
							<view class="navbar_tow_tow">
								<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
							</view>
						</view>
					</view>
					<!-- 吸顶 -->
					<view v-if="isFixedTop" class="fourcontent flex-between" style="padding: 28rpx 0 28rpx 28rpx">
						<view class="fourcontent_item flex-start" v-for="(item,index) in 10" :key="index">
							<text>西安</text>
							<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
								size="16"></u-icon>
						</view>
					</view>
				</view>
				<!-- 以上都是导航栏处理 -->

				<!-- 轮播图 -->
				<swipers></swipers>
				<!-- 广告 -->
				<advertisement></advertisement>
				<!-- 金刚区 -->
				<diamond></diamond>
				<!-- 今日上线 -->
				<todaylist></todaylist>
				<!-- 类目 -->
				<view class="fourcontent flex-between" @click="viewHistory">
					<view class="fourcontent_item flex-start" v-for="(item,index) in 10" :key="index">
						<text>西安</text>
						<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" size="16"></u-icon>
					</view>
				</view>

				<!-- 产品 -->
				<productlist></productlist>

			</view>
</template>
<script>
	import swipers from './components/swiper.vue'
	import diamond from './components/diamond.vue'
	import todaylist from './components/todaylist.vue'
	import productlist from './components/productlist.vue'
	import advertisement from './components/advertisement.vue'
	export default {
		components: {
			swipers,
			diamond,
			todaylist,
			productlist,
			advertisement
		},
		data() {
			return {
				isFixedTop: false, //吸顶是否显示
				Topdistance: 3000, //吸顶初始距离
				keyword: '',
				current: 0,
				opacity: false,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			};
		},

		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
			} else {
				this.opacity = true
			}
			if (e.scrollTop >= this.Topdistance) { //类别导航栏
				this.isFixedTop = true
			} else {
				this.isFixedTop = false
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		onLoad() {
			setTimeout(() => {
				this.GetTop()
			}, 1000)
		},
		onShow() {},
		methods: {
			uindexlist() {
				uni.pro.navigateTo('index/uindexlist')
			},
			updateCity(data) {
				this.list[data].end_times = 0;
				this.$forceUpdate();
			},
			GetTop() {
				//获取元素距离顶部的距离
				this.$u.getRect('.fourcontent').then(res => {
					this.Topdistance = res.top - this.HeighT.heightBar
				})
			},
			viewHistory() {
				//移动高度=滚动高度 + 距离上面的位置 - 导航条 - 状态栏高度
				uni.pageScrollTo({
					scrollTop: this.Topdistance + 1,
					duration: 300
				});
			},
		}

	};
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		position: -webkit-sticky;
		position: sticky;
		top: 0;

		.active {
			background: rgba(249, 249, 249, 1);
		}

		.status-bar {
			// #ifdef APP-PLUS
			height: calc(var(--status-bar-height) / 2);
			// #endif
			// #ifdef MP-WEIXIN
			height: var(--status-bar-height);
			// #endif
		}

		// #ifdef APP-PLUS
		.statusbarmargin {
			margin-top: calc(var(--status-bar-height) / 2);
		}

		// #endif
		.navbar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 99;

			.navbar_tow {
				width: 100%;
				position: relative;
				font-size: 36rpx;

				.flex-between {
					// #ifdef APP-PLUS || H5
					margin: 28rpx;
					// #endif
					// #ifdef MP-WEIXIN
					margin-left: 28rpx;
					// #endif
					width: 100%;
					flex-wrap: nowrap;
					height: 100%;
					line-height: 100%;

					.navbar_tow_one {
						height: 100%;
						line-height: 100%;

						text:nth-child(1) {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						text:nth-child(2) {
							margin-left: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}

					.navbar_tow_tow {
						position: relative;
						height: 100%;
						line-height: 100%;
						flex: 1;
						margin-left: 10rpx;

						.navbar_tow_towinput {
							padding-left: 32rpx;
							height: 100%;
							width: auto;
							background: #FFFFFF;
							border-radius: 34rpx;
						}
					}
				}

			}
		}
		.fourcontent {
			padding: 32rpx 0 0 28rpx;
			overflow-x: auto;
			flex-wrap: nowrap;

			.fourcontent_item {
				flex-wrap: nowrap;
				margin-left: 22rpx;
				padding: 4rpx 14rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				text {
					width: max-content;
				}
			}

			.fourcontent_item:nth-child(1) {
				margin-left: 0;
			}
		}

	}
</style>