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

于 2024-08-29 17:38:10 发布
阅读量336 收藏 16
点赞数 8
分类专栏： 微信小程序开发入门 文章标签： 微信小程序 小程序 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/141683049
版权

文章目录

1. 官方文档指南

  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-xbooleanfalse否允许横向滚动
scroll-ybooleanfalse否允许纵向滚动
upper-thresholdnumber/string50否距顶部/左边多远时，触发 scrolltoupper 事件
lower-thresholdnumber/string50否距底部/右边多远时，触发 scrolltolower 事件
scroll-topnumber/string否设置竖向滚动条位置
scroll-leftnumber/string否设置横向滚动条位置
scroll-into-viewstring否值为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡

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

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

在这里插入图片描述

  1. 从 页面看的出来不是一屏显示，整个页面是可以上下滑动的，当页面内容一屏显示不下去的时候，就需要滑动，所以最外层需要使用scroll-view来包裹

  2. 把页面按模块划分，就是垂直布局，所以父布局使用flex弹性布局，然后设置显示方向为flex-direction: column垂直方向

3. 代码实现过程

  1. 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>

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

  1. 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;
}

注意事项

  1. scroll-view 一定要设置方向scroll-y 或scroll-x 一定要给固定高度 100vh 或已知高度
  2. 100vh：代表视口高度，简单的说就是手机一屏能显示的高度

4. 运行效果图

在这里插入图片描述

浩宇软件开发
关注
  • 8
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序开发：实现商品购买与订单管理
吃不胖.
10-28 670
在订单详情页面中，用户可以查看自己的订单详情。（1）在结算页面中，必须提供用户可选择的配送地址，让用户可以清晰地了解到自己需要支付的配送费用。（3）在结算页面中需要提供订单的总价和支付金额，让用户可以清晰地了解到自己需要支付的金额。（3）在“我的订单”页面中，用户可以查看订单的详情，包括订单的商品名称、数量、价格等信息。（4）在订单详情页面中，需要提供订单的配送信息，让用户可以清晰地了解到自己的订单配送信息。（3）在订单详情页面中，用户可以查看订单的商品详情，包括商品的名称、数量、价格等信息。
微信小程序开发 scroll-view实现横向纵向滚动
m0_65027074的博客
10-20 3577
微信小程序开发 scroll-view实现横向纵向滚动
微信小程序开发前端基础知识
虎康的博客
06-27 7577
微信小程序
微信小程序开发--分类页面实现
Aurora_1970s的博客
10-24 8175
微信小程序开发–分类页面实现 之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能，接着需要在分类页面(kind.wxml)实现商品分类。 1.引入第三方组件 用到的是Tab标签页 在kind.json中写入： "usingComponents": { "van-tab": "/miniprogram_npm/@vant/weapp/tab/index", "van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index"
微信小程序导购开发跳转到京东拼多多苏宁唯品会等小程序
过往的记忆
02-26 3129
1、京东小程序 开普勒文档 var path = "pages/union/proxy/proxy?spreadUrl=" + encodeURIComponent(url); wx.navigateToMiniProgram({ appId: 'wx91d27dbf599dff74', path: path, success(res) { } }) url是后台生成的短链，具体看文档 2、拼多多小程序 var path = package_a/welfare_coupon/welfare_co
微信小程序实现购物商城（附源码）
热门推荐
男儿何必尽成功的博客
03-20 2万+
微信小程序实现购物商城的前端代码。 1.首页：包括活动图片的轮播展示、活动商品缩略图和基本信息的展示、横向滑动tabBar、搜索框等。 2.活动详情展示页：活动详情展示页有两种，根据type进行分别跳转。一种是展示活动详情，主要包括活动图片、活动内容、活动链接等。另一种是展示活动商品，包括活动图片、活动内容和活动商品列表。 3.商品详情展示页：商品详情展示了商品轮播图和商品信息。 4.搜索页，支持按销量、价格等进行排序。 5.我的页面：展示用户余额、返利总额等信息。 6.订单页面：展示待返利订单、已返利订单
微信小程序使用uni-app开发小程序及部分功能实现详解心得
Fang2001131919的博客
06-19 4596
uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；到此这篇关于微信小程序使用uni-app开发小程序及部分功能实现的文章就介绍到这了,更多相关微信小程序用uni-app开发小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
短链打开微信小程序对应页面
qq_34573044的博客
07-29 220
通过 “明文scheme” 方式在微信外部环境（浏览器等）直接点击链接跳转到对应小程序页面；
跨平台应用开发进阶(六十三)：微信小程序开发_跨平台开发小程序用什么(1)
2401_84446963的博客
05-04 966
最近一次更新版本v1.10.0，日期2021-12-21，有专门的维护团队和社区。Vant是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护多年时间。Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。50+组件。
微信小程序仿《拼多多》拼团系统源码
10-03
微信小程序仿《拼多多》拼团系统源码实现了拼多多部分功能，包括首页列表，热拼，拼单详情等功能，特色：实现了tab标签固定在顶部 目录结构： image — 存放项目图片文件 page — 存放项目页面渲染相关文件 utils —...
微信小程序-仿《拼多多》拼团系统源码
06-11
通过对这个项目源码的学习和研究，开发者不仅可以提升自己的微信小程序开发技能，还能深入了解拼多多拼团模式的实现细节，对于想要从事电商领域或社交电商应用开发的人员来说，这是一个极具价值的学习资源。
一个电商微信小程序，仿拼多多
09-16
这个小程序是使用原生的小程序框架开发的，特别适合那些已经熟悉Vue.js并希望进一步掌握微信小程序开发的开发者。下面将详细介绍该项目中的关键知识点。 1. **微信小程序框架**：微信小程序是一种轻量级的应用开发...
微信小程序scroll-view仿拼多多横向滑动滚动条
10-18
通过本知识点的介绍，大家可以了解到微信小程序scroll-view组件在实现仿拼多多横向滑动滚动条时的关键属性和方法，并能够根据实际的开发需求进行相应的代码实现。希望本文能够对正在开发微信小程序的朋友们提供有...
微信小程序-仿《拼多多》拼团系统源码.rar
09-29
通过深入研究这套源码，开发者可以学习到微信小程序的基本开发流程、数据管理、网络请求、界面设计以及复杂业务逻辑的实现，对于提升小程序开发技能非常有帮助。同时，这也是一个很好的实战项目，可以作为进一步优化...
基于xr-frame实现微信小程序的人脸识别3D模型叠加AR功能（含源码）
最新发布
qq_33789001的博客
08-28 1422
xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。xr-frame在基础库v2.32.0开始基本稳定，发布为正式版，但仍有一些功能还在开发，目前（2024.08.24）有一些限制如下：1最低要求客户端iOS8.0.29、安卓8.0.30及以上，推荐稳定版在iOS8.0.36、安卓8.0.35及以上。2基础库最低2.27.1及以上，推荐2.32.0及以上。3开发工具需要最新版本，建议Nightly版本。
微信小程序利用canva进行大图片压缩
weixin_45446474的博客
08-28 142
微信小程序利用canva进行大图片压缩
微信小程序登陆
2302_80490510的博客
08-20 888
我们之前的登陆都是：网页http传来请求，我们java来做这个请求的校验。但是如果微信小程序登陆，就要用到相关的api来实现。
微信小程序获取用户openId并通过服务端向用户发送模板消息
honor_zhang的博客
08-25 1043
本篇文章写了使用小程序的订阅模板消息，给对应用户发送服务通知。本人设想是利用此服务通知作为一个消息的承接载体，替代短信通知，节省成本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩宇软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值