移动端布局

weixin_45639351

已于 2022-07-25 12:22:58 修改

阅读量45

点赞数

分类专栏： CSS布局文章标签： javascript 前端 css

于 2022-07-25 12:21:51 首次发布

本文链接：https://blog.csdn.net/weixin_45639351/article/details/125972426

版权

CSS布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

app中间部分样式

在这里插入图片描述

<template>
	<view class="content">
		<view class="header">
			<view>关注</view>
			<view>推荐</view>
			<view>视频</view>
			<view>好友</view>
			<view>小说</view>
			<view>小游戏</view>
		</view>
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="scroll-card">
					<view >
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="">新鲜水果</view>
					<view class="scroll-price">价格：￥300</view>
				</view>
				<view class="scroll-card">
					<view >
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="">新鲜水果</view>
					<view class="scroll-price">价格：￥300</view>
				</view>
				<view class="scroll-card">
					<view >
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="">新鲜水果</view>
					<view class="scroll-price">价格：￥300</view>
				</view>
				<view class="scroll-card">
					<view >
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="">新鲜水果</view>
					<view class="scroll-price">价格：￥300</view>
				</view>
				<view class="scroll-card">
					<view >
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="">新鲜水果</view>
					<view class="scroll-price">价格：￥300</view>
				</view>
				<view class="scroll-card">
					<view >
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="">新鲜水果</view>
					<view class="scroll-price">价格：￥300</view>
				</view>
				<view class="scroll-card">
					<view >
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="">新鲜水果</view>
					<view class="scroll-price">价格：￥300</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '明哥好'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		color: #333;
	}
	.header{
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}
	.list-wrap{
		flex-grow: 1;   /* 因为content用了flex,所以得用这个撑一下,不然页面会消失 */
		position: relative;
	}
	.list{
		position: absolute;  /* 进行定位,要不然随着滑轮滚动,导航栏会消失 */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.scroll-card{
		border-bottom: 1px solid #333;
		margin: 0 10px;
		padding: 15px 0;
	}
	.scroll-card image{
		width: 100%;
		border-radius: 8px;
	}
	.scroll-price{
		color: red;
	}
</style>