renshouH5/library/poster/index.vue

<template>
	<view>
		<view class="top-sort ddflex">
			<view class="top-sort-item flex top-sort-item-active">海报</view>
			<view class="top-sort-item flex">产品宣传</view>
		</view>
		<view style="height: 85rpx;"></view>
		<view style="border-top: 20rpx solid #F4F5F9;">
			<view class="search-box ddflex">
				<view class="search-input ddflex fflex">
					<image src="/static/images/ssico.png"></image>
					<input @confirm="searchFn" confirm-type="search" @input="searchFn" v-model="searchVal" class="fflex"
						placeholder="请输入关键词" />
				</view>
			</view>
			<view class="ddflex" style="padding: 0 30rpx;">
				<view class="search-tag search-tag-active">全部</view>
				<view class="search-tag" v-for="item in 12">问候日签</view>
			</view>
			<view class="ddflex" style="padding: 30rpx;">
				<view class="poster-item" v-for="item in 6" @click="jumpUrl('/library/posterService/posterService')">
					<image class="poster-item-pic" src="http://img.zhiqiyun.com/test/2023/07/31/8b7ed072b68fe70f0d6f409a71a8b17b.png" mode="aspectFill"></image>
					<view class="poster-item-title tover">海报名称</view>
					<view class="poster-item-use">2056 人正在使用</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
			}
		},
		onLoad(options) {

		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./index.css";
</style>