微信小程序开发，实现拼多多个人中心页面

文章目录

1. 官方文档指南

scroll-view: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

功能描述
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

横向滚动需打开 enable-flex 以兼容 WebView，如

<scroll-view scroll-x enable-flex style="flex-direction: row;"/>

滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
使用 worklet 函数需要开启开发者工具 “将 JS 编译成 ES5” 或 “编译 worklet 函数” 选项。

通用属性

属性	类型	默认	必填	说明
`scroll-x`	boolean	false	否	`允许横向滚动`
`scroll-y`	boolean	false	否	`允许纵向滚动`
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	number/string		否	设置竖向滚动条位置
scroll-left	number/string		否	设置横向滚动条位置
scroll-into-view	string		否	值为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡

详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档

2. 根据UI图分析整体布局

在这里插入图片描述

从页面看的出来不是一屏显示，整个页面是可以上下滑动的，当页面内容一屏显示不下去的时候，就需要滑动，所以最外层需要使用scroll-view来包裹
把页面按模块划分，就是垂直布局，所以父布局使用flex弹性布局，然后设置显示方向为flex-direction: column垂直方向

3. 代码实现过程

mine.wxml

<!--pages/cart/cart.wxml-->
<scroll-view scroll-y>
	<view class="mine-container">

		<!-- 头部区域 -->
		<view class="avatar-container">
			<image src="https://img1.baidu.com/it/u=96971377,4204220743&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" class="avatar" />
			<view class="username-container">
				<text class="username-view">浩宇软件开发</text>
				<text class="userinfo-view">更新资料</text>
			</view>
		</view>


		<!-- 省钱月卡区域 -->
		<view class="notify-container">
			<view>
				<span style="margin-left: 30rpx;">省钱月卡</span>
				<span style="margin-left: 10rpx; margin-right: 10rpx;">|</span>
				<span style="font-size: 20rpx;">先领券 再下单</span>
			</view>
			<view>
				<image src=" ../../assets/img-right-arrow.png" class="right-arrow-image" />
			</view>
		</view>


		<!-- 我的订单区域 -->
		<view class="mine-order-container">
			<view class="order-title-view">
				<span style="font-weight: 500;">我的订单</span>
				<view class="right-arrow-view">
					<span class="look-all-view">查看全部</span>
					<image src=" ../../assets/arrow.png" class="right-arrow-image" />
				</view>
			</view>

			<view class="order-container">
				<view>
					<image src="../../assets/img-dfk.png" mode="" />
					<span>代付款</span>
				</view>

				<view>
					<image src="../../assets/img-dfx.png" mode="" />
					<span>待分享</span>
				</view>

				<view>
					<image src="../../assets/img-dfh.png" mode="" />
					<span>待发货</span>
				</view>

				<view>
					<image src="../../assets/img-dsh.png" mode="" />
					<span>待收货</span>
				</view>

				<view>
					<image src="../../assets/img-dpj.png" mode="" />
					<span>评价</span>
				</view>
			</view>

		</view>



		<view style="height: 15rpx; background-color: #f5f5f5; margin-top: 30rpx;"></view>



		<!-- 多多钱包区域 -->
		<view class=".mine-order-container">
			<view class="order-title-view">
				<span style="font-weight: 500;">多多钱包</span>
				<view class="right-arrow-view">
					<span class="look-all-view">查看余额</span>
					<image src=" ../../assets/arrow.png" class="right-arrow-image" />
				</view>
			</view>
		</view>


		<view style="height: 15rpx; background-color: #f5f5f5; margin-top: 30rpx;"></view>


		<!-- 优惠券区域 -->
		<view class="mine-order-container">
			<view class="order-container">
				<view>
					<image src="../../assets/img-yhq.png" mode="" />
					<span>优惠券</span>
				</view>

				<view>
					<image src="../../assets/img-yhq.png" mode="" />
					<span>商品收藏</span>
				</view>

				<view>
					<image src="../../assets/img-yhq.png" mode="" />
					<span>店铺关注</span>
				</view>

				<view>
					<image src="../../assets/img-yhq.png" mode="" />
					<span>历史浏览</span>
				</view>

				<view>
					<image src="../../assets/img-yhq.png" mode="" />
					<span>退款售后</span>
				</view>
			</view>
		</view>



		<view style="height: 15rpx; background-color: #f5f5f5; margin-top: 30rpx;"></view>



		<!-- 满减区域 -->
		<view class="mine-order-container">
			<view class="order-container">
				<view>
					<image src="../../assets/img-hcp.png" mode="" />
					<span>超级满减</span>
				</view>

				<view>
					<image src="../../assets/img-hcp.png" mode="" />
					<span>火车票</span>
				</view>

				<view>
					<image src="../../assets/img-hcp.png" mode="" />
					<span>收货地址</span>
				</view>

				<view>
					<image src="../../assets/img-hcp.png" mode="" />
					<span>官方客服</span>
				</view>

				<view>
					<image src="../../assets/img-hcp.png" mode="" />
					<span>设置</span>
				</view>
			</view>
		</view>



		<view style="height: 15rpx; background-color: #f5f5f5; margin-top: 30rpx;"></view>


		<view style="text-align: center; padding: 15rpx; color: #c6322a; font-weight: 600;"> 精选推荐</view>


		<!-- 底部区域 -->
		<view class="foot-container">
			<image src="https://img0.baidu.com/it/u=3903181769,1438984023&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="" />

			<image src="https://img0.baidu.com/it/u=2298381241,46591159&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="" />

			<image src="https://img0.baidu.com/it/u=3682361981,3521008330&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="" />

			<image src="https://img1.baidu.com/it/u=1788024599,2949661288&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="" />
		</view>

	</view>
</scroll-view>

根据页面布局：划分为：头部区域，省钱月卡区域，我的订单区域，多多钱包区域，优惠券区域，满减区域，底部区域

mine.wxss 样式

scroll-view{
    
    
	height: 100vh;
}

.mine-container {
    
    
  display: flex;
  flex-direction: column;
}

.avatar-container {
    
    
  display: flex;
  flex-direction: row;
  padding-top: 160rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-bottom: 30rpx;
  align-items: center;
}
.avatar-container .avatar {
    
    
  height: 148rpx;
  width: 148rpx;
  border-radius: 79rpx;
}
.username-container {
    
    
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
}

.username-container .userinfo-view {
    
    
  display: block;
  width: 130rpx;
  background-color: #f7807e;
  text-align: center;
  border-radius: 16rpx;
  font-size: 20rpx;
  padding-top: 3rpx;
  padding-bottom: 3rpx;
  color: wheat;
  font-size: 20rpx;
  margin-top: 10rpx;
}

.notify-container {
    
    
  display: flex;
  background-color: #fdefee;
  height: 100rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.notify-container .right-arrow-image {
    
    
  width: 34rpx;
  height: 34rpx;
}

.notify-container span {
    
    
  font-size: 26rpx;
  color: #c6322a;
  display: inline-block;
  fill: violet;
}

.mine-order-container {
    
    
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
	margin-right: 30rpx;
}

.mine-order-container .order-title-view {
    
    
  display: flex;
  justify-content: space-between;
	align-items: center;
	margin-top: 30rpx;
}

.mine-order-container .order-title-view image {
    
    
  width: 40rpx;
  height: 40rpx;
}

.mine-order-container .look-all-view {
    
    
  font-size: 24rpx;
  color: #999999;
}
.right-arrow-view {
    
    
  display: flex;
	align-items: center;
}

.order-container {
    
    
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
}
.order-container view {
    
    
  display: flex;
	flex-direction: column;
	align-items: center;
}
.order-container view image {
    
    
  width: 48rpx;
  height: 48rpx;
}
.order-container view span{
    
    
	 color: #666666; 
	 font-size: 26rpx;
	 margin-top: 10rpx;
	 font-weight: 500;
}

.foot-container{
    
    
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.foot-container image{
    
    
	width: 49%;
	margin-bottom: 16rpx;
}

注意事项

scroll-view 一定要设置方向scroll-y 或scroll-x 一定要给固定高度 100vh 或已知高度

100vh：代表视口高度，简单的说就是手机一屏能显示的高度

4. 运行效果图