appointment_weapp/pages/index/specials.vue

<template>
	<view class="index">
		<navbar v-if="op!=1" :style="'background-color: rgba(255, 255, 255,' + op +')'" :Background='Background'
			:navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='navfatherMethod'>
		</navbar>
		<navbar v-else :Background="'#fff'" :navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='navfatherMethod'>
		</navbar>
		<view class="indexbox">
			<view class="indexbox_boxitem flex-between">
				<view class="indexbox_boxitem_item flex-colum-start" v-for="(item,index) in list" :key="index"
					@click="eeInfo(item)">
					<view class="indexbox_boxitem_itemimage">
						<image :src="item.host_img" mode="widthFix"></image>
					</view>
					<view class="indexbox_boxitem_itemone">
						{{item.title}}
					</view>
					<view class="indexbox_boxitem_itemtow flex-start">
						<text>￥</text>
						<text>{{item.price}}</text>
					</view>
				</view>
			</view>
			<view v-if="list.length==0 && is_end == true" style="margin-top: 100rpx;width: 100%;" class="flex-colum">
				<image :src="bgnothave" mode="aspectFill">
				</image>
			</view>
			<view class="flex-colum" style="width: 100%;">
				<u-loadmore :status="form.status" />
			</view>
		</view>

	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				navtitle: '购物商城', //名称
				navboxshow: '4', //显示
				Background: 'none',
				list: [],
				is_end: false,
				form: {
					page: 1,
					status: 'loadmore',
				},
				statusBarHeight: 0,
				op: 0,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
		},
		onPageScroll(res) {
			// res.scrollTop 为页面滚动距离
			let top = res.scrollTop
			// height为状态栏高度+自定义导航栏标题内容高度（这里是44px）
			let height = this.statusBarHeight + 44
			// 判断滚动高度
			// 如果小于顶部自定义导航的高度
			if (top <= height) {
				// 透明度(op) = 滚动距离/导航栏高度
				//  (不做操作 直接计算 this.op = top/height 也可以实现)
				// 由于(滚动距离/导航栏高度)得到0-1之间小数点后n位小数
				// 四舍五入后得到的只能是0/1
				// 因此做如下操作
				this.op = Math.round(top / height * 100) / 100
			} else {
				// 如果滚动距离大于导航高度，则透明度值为1（不透明）
				this.op = 1
			}
		},
		onReachBottom() {
			this.shoppingindex()
		},
		onShow() {
			this.shoppingindex()
		},
		methods: {
			async shoppingindex() {
				let res = await this.api.shoppingbuyingspeciallist({
					page: this.form.page
				})
				if (res.length == 0) {
					this.is_end = true
					this.form.status = 'nomore'
					return false;
				} else {
					this.form.status = 'loading';
					this.form.page = ++this.form.page;
					setTimeout(() => {
						this.list = [...this.list, ...res];
						if (res.length == 10) {
							this.form.status = 'loading';
						} else {
							this.is_end = true;
							this.form.status = 'nomore';
						}
					}, 500)
				}
			},
			init_fn() {
				this.list = []
				this.is_end = false
				this.form.page = 1
				this.form.status = 'loadmore'
				this.shoppingindex()
			},
			eeInfo(e) { //查看订单详情
				if (e.spec_type == 1) {
					uni.pro.navigateTo('mall/mallInfo', {
						id: e.id,
					})
				} else {
					uni.pro.navigateTo('mall/mallInfos', {
						id: e.id,
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: url(@/static/imge/specialss.png) no-repeat;
		background-size: contain;
	}

	.index {
		.indexbox {
			border-radius: 30rpx 30rpx 0px 0px;
			position: relative;
			width: 100%;
			margin-top: 48rpx;
			padding: 0rpx 28rpx 32rpx 28rpx;
			background: #fff;

			.indexbox_boxitem:after {
				content: "";
				flex: 0 0 220rpx;
				/* 如何计算233
			                ulist的width是500px，li的width是100px ，根据运行结果，每一行有四个格子，三个间隔，500-100-100-33-33=244，有一点小误差调一调就差不多了
			             */
			}

			.indexbox_boxitem {
				background: #ffffff;

				.indexbox_boxitem_item {
					margin-top: 32rpx;

					.indexbox_boxitem_itemimage {
						width: 220rpx;
						height: 220rpx;
						background: #F8F8F8;
						border-radius: 8rpx;

						image {
							width: auto;
							height: auto;
						}
					}

					.indexbox_boxitem_itemone {
						width: 220rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 16rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						color: #1A1A1A;
					}

					.indexbox_boxitem_itemtow {
						margin-top: 10rpx;
						padding-right: 10rpx;
						justify-content: flex-end;
						background: url(@/static/imge/specials.png) no-repeat;
						background-size: cover;
						width: 148rpx;
						height: 48rpx;
						font-family: Roboto, Roboto;
						font-weight: bold;
						color: #FFFFFF;

						text {
							height: 48rpx;
						}

						text:nth-child(1) {
							line-height: 50rpx;
							font-size: 16rpx;
						}

						text:nth-child(2) {
							line-height: 48rpx;
							font-size: 22rpx;
						}
					}
				}
			}

		}
	}
</style>