前文说明

这里用到了vant组件库，具体引用可以查看我的这篇博客。。本篇博客约1w字，需要有小程序基础，阅读大概需要8分钟。涉及模版，可直接复制代码演示。

一、效果展示

二、个人页代码

主要用到了vant到骨架屏，这样可以使数据在请求的时候，让用户感觉加载等待，能起到一定的用户体验效果。如果不想用的话也可以把van-skeleton这层标签给删掉。里面的api属性具体可以查看vant文档，这里就不赘述了，主要讲讲流星雨的动效实现。

2.1、my.html

my.html：

<van-skeleton avatar-size="116px" avatar row="5" row-width="{{['100%', '50%', '100%', '50%', '100%']}}"loading="{{ skeletonLoading }}"><view class="my-container" wx:if="{{authFlag}}"><view class="profile-home" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"><view class="jt-star-home"><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view><view class="meteor"></view></view><view class="avatar-home"><image class="my-avatar" mode="widthFix" src="{{userInfo.avatarUrl}}"></image></view><view class="my-name">{{userInfo.nickName}}</view></view><view class="mem-point"><view class="mem-item"><view class="d-flex jc-center mb-10"><image class="w-54 mem-item-img" mode="widthFix" src="../../img/lvhua.png"></image></view><view class="point-title">绿化贡献</view><view class="d-flex jc-center point-unit align-end">{{green_contribution}}<span class="ml-5 fs-13">up</span></view></view><view class="mem-item"><view class="d-flex jc-center mb-10"><image class="w-54 height-auto" mode="widthFix" src="../../img/huishou.png"></image></view><view class="point-title">累计回收</view><view class="d-flex jc-center point-unit align-end">{{cumulative_recovery}}<span class="ml-5 fs-13">kg</span></view></view><view class="mem-item"><view class="d-flex jc-center mb-10"><image class="w-54 height-auto" mode="widthFix" src="../../img/shouyi.png"></image></view><view class="point-title">累计收益</view><view class="d-flex jc-center point-unit align-end">{{accumulated_earnings}}<span class="ml-5 fs-13">¥</span></view></view></view><view class="profile-btn-home"><view class="profile-btn" bindtap="activeHandler"><view class="profile-img-home"><image mode="widthFix" class="my-icon height-auto" src="../../img/active.png"></image><view class="profile-btn-title">都在玩</view></view></view><view class="profile-btn" bindtap="addressHandler"><view class="profile-img-home"><image mode="widthFix" class="my-icon height-auto" src="../../img/address.png"></image><view class="profile-btn-title">地址管理</view></view></view><view class="profile-btn" bindtap="recycleHandler"><view class="profile-img-home"><image mode="widthFix" class="my-icon height-auto" src="../../img/recycle-btn.png"></image><view class="profile-btn-title">立即下单</view></view></view><view class="profile-btn" bindtap="orderHandler"><view class="profile-img-home"><image mode="widthFix" class="my-icon height-auto" src="../../img/my-order.png"></image><view class="profile-btn-title">我的订单</view></view></view><view class="profile-btn" bindtap="adviceHandler"><view class="profile-img-home"><image mode="widthFix" class="my-icon height-auto" src="../../img/advice.png"></image><view class="profile-btn-title">建议反馈</view></view></view></view></view>
</van-skeleton>

可以看到我们这里定义了一个jt-star-home容器，里面包裹了十几个meteor容器，这些主要就是流星雨的dom元素了。

2.2、my.css

.my-container {margin-top: -130px;box-sizing: border-box;width: 100%;
}.avatar-home {width: 116px;height: 116px;margin: 0 auto;padding-top: 30px;margin-bottom: 13px;
}.profile-home {height: 270px;width: 100% !important;background-color: #4d4343;background: linear-gradient(to right, #4d4343 0%, #2D2D2D 100%);
}
.my-avatar {display: block;width: 100%;border: 2px solid #fff;border-radius: 50%;height: auto;
}
.mem-item-img {height: auto;
}.my-name {font-size: 16px;font-weight: 600;color: #FFFFFF;line-height: 22px;text-align: center;margin-bottom: 22px;
}.my-money-home {display: flex;justify-content: center;align-items: center;
}.my-money-title {font-size: 14px;letter-spacing: 0px;color: #ffffff;
}.my-money {font-size: 16px;letter-spacing: 0px;color: #eecea6;
}.profile-btn-home {padding: 0 27px;box-sizing: border-box;padding-top: 150px;transform: translateY(-30px);background-color: #fff;border-radius: 25px 25px 0 0;
}
.mem-item {width: 33%;
}.profile-btn {display: flex;justify-content: space-between;align-items: center;padding: 18px 24px 19px 18px;margin-bottom: 16px;background-color: #fff;border-radius: 10px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 10px 20px -2px rgba(0, 0, 0, 0.17);
}.profile-img-home {display: flex;align-items: center;
}.my-icon {width: 39px;margin-right: 17px;height: auto;
}.profile-btn-title {font-size: 14px;font-weight: 600;color: #2D2D2D;line-height: 20px;
}.icon-more {width: 6px;
}.mem-point {color: #fff;display: flex;justify-content: space-around;position: absolute;width: 90%;top: 200px;background-color: #fff;left: 50%;transform: translateX(-50%);border-radius: 8px;padding: 20px 0;box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3);z-index: 99;
}.point-title {color: #4d4343;text-align: center;
}.point-unit {color: green;margin-top: 5px;
}.van-skeleton {position: relative;
}.van-skeleton__avatar {position: absolute;left: 50%;transform: translateX(-50%);
}.van-skeleton__content {margin-top: 130px;
}
.jt-star-home {position: fixed;width: 100%;height: 80px;-webkit-transform: rotate(45deg);transform: rotateZ(45deg);-webkit-animation: sky 200000ms linear infinite;animation: sky 200000ms linear infinite;
}.meteor {position: absolute;left: 50%;top: 50%;height: 2px;background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));border-radius: 999px;-webkit-filter: drop-shadow(0 0 6px #699bff);filter: drop-shadow(0 0 6px #699bff);-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}.meteor::before,
.meteor::after {content: '';position: absolute;top: calc(50% - 1px);right: 0;height: 2px;background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));-webkit-transform: translateX(50%) rotateZ(45deg);transform: translateX(50%) rotateZ(45deg);border-radius: 100%;-webkit-animation: shining 3000ms ease-in-out infinite;animation: shining 3000ms ease-in-out infinite;
}.meteor::after {-webkit-transform: translateX(50%) rotateZ(-45deg);transform: translateX(50%) rotateZ(-45deg);
}/* 1 */
.meteor:nth-child(1) {top: calc(50% - 185px);left: calc(50% - 150px);-webkit-animation-delay: 8888ms;animation-delay: 8888ms;
}.meteor:nth-child(1)::before,
.meteor:nth-child(1)::after,
.meteor:nth-child(1)::after {-webkit-animation-delay: 8888ms;animation-delay: 8888ms;
}/* 2 */
.meteor:nth-child(2) {top: calc(50% - 50px);left: calc(50% - 180px);-webkit-animation-delay: 9288ms;animation-delay: 9288ms;
}.meteor:nth-child(2)::before,
.meteor:nth-child(2)::after,
.meteor:nth-child(2)::after {-webkit-animation-delay: 9288ms;animation-delay: 9288ms;
}.meteor:nth-child(3) {top: calc(50% - 145px);left: calc(50% - 135px);-webkit-animation-delay: 8600ms;animation-delay: 8600ms;
}.meteor:nth-child(3)::before,
.meteor:nth-child(3)::after,
.meteor:nth-child(3)::after {-webkit-animation-delay: 8600ms;animation-delay: 8600ms;
}.meteor:nth-child(4) {top: calc(50% - 78px);left: calc(50% - 155px);-webkit-animation-delay: 3288ms;animation-delay: 3288ms;
}.meteor:nth-child(4)::before,
.meteor:nth-child(4)::after,
.meteor:nth-child(4)::after {-webkit-animation-delay: 3288ms;animation-delay: 3288ms;
}.meteor:nth-child(5) {top: calc(50% - 183px);left: calc(50% - 8px);-webkit-animation-delay: 5588ms;animation-delay: 5588ms;
}.meteor:nth-child(5)::before,
.meteor:nth-child(5)::after,
.meteor:nth-child(5)::after {-webkit-animation-delay: 5588ms;animation-delay: 5588ms;
}.meteor:nth-child(6) {top: calc(50% - 30px);left: calc(50% - 195px);-webkit-animation-delay: 9388ms;animation-delay: 9388ms;
}.meteor:nth-child(6)::before,
.meteor:nth-child(6)::after,
.meteor:nth-child(6)::after {-webkit-animation-delay: 9388ms;animation-delay: 9388ms;
}.meteor:nth-child(7) {top: calc(50% - 95px);left: calc(50% - 70px);-webkit-animation-delay: 2588ms;animation-delay: 2588ms;
}.meteor:nth-child(7)::before,
.meteor:nth-child(7)::after,
.meteor:nth-child(7)::after {-webkit-animation-delay: 2588ms;animation-delay: 2588ms;
}.meteor:nth-child(8) {top: calc(50% - 60px);left: calc(50% - 70px);-webkit-animation-delay: 5288ms;animation-delay: 5288ms;
}.meteor:nth-child(8)::before,
.meteor:nth-child(8)::after,
.meteor:nth-child(8)::after {-webkit-animation-delay: 5288ms;animation-delay: 5288ms;
}.meteor:nth-child(9) {top: calc(50% - 75px);left: calc(50% - 250px);-webkit-animation-delay: 888ms;animation-delay: 888ms;
}.meteor:nth-child(9)::before,
.meteor:nth-child(9)::after,
.meteor:nth-child(9)::after {-webkit-animation-delay: 888ms;animation-delay: 888ms;
}.meteor:nth-child(9) {top: calc(50% - 76px);left: calc(50% - 240px);-webkit-animation-delay: 2388ms;animation-delay: 2388ms;
}.meteor:nth-child(9)::before,
.meteor:nth-child(9)::after,
.meteor:nth-child(9)::after {-webkit-animation-delay: 2388ms;animation-delay: 2388ms;
}.meteor:nth-child(10) {top: calc(50% - 85px);left: calc(50% - 6px);-webkit-animation-delay: 3588ms;animation-delay: 3588ms;
}.meteor:nth-child(10)::before,
.meteor:nth-child(10)::after,
.meteor:nth-child(10)::after {-webkit-animation-delay: 3588ms;animation-delay: 3588ms;
}.meteor:nth-child(11) {top: calc(50% - 135px);left: calc(50% - 260px);-webkit-animation-delay: 2888ms;animation-delay: 2888ms;
}.meteor:nth-child(11)::before,
.meteor:nth-child(11)::after,
.meteor:nth-child(11)::after {-webkit-animation-delay: 2888ms;animation-delay: 2888ms;
}.meteor:nth-child(12) {top: calc(50% - 15px);left: calc(50% - 8px);-webkit-animation-delay: 388ms;animation-delay: 388ms;
}.meteor:nth-child(12)::before,
.meteor:nth-child(12)::after,
.meteor:nth-child(12)::after {-webkit-animation-delay: 388ms;animation-delay: 388ms;
}.meteor:nth-child(13) {top: calc(50% - 155px);left: calc(50% - 50px);-webkit-animation-delay: 7288ms;animation-delay: 7288ms;
}.meteor:nth-child(13)::before,
.meteor:nth-child(13)::after,
.meteor:nth-child(13)::after {-webkit-animation-delay: 7288ms;animation-delay: 7288ms;
}.meteor:nth-child(14) {top: calc(50% - 28px);left: calc(50% - 80px);-webkit-animation-delay: 8888ms;animation-delay: 8888ms;
}.meteor:nth-child(14)::before,
.meteor:nth-child(14)::after,
.meteor:nth-child(14)::after {-webkit-animation-delay: 8888ms;animation-delay: 8888ms;
}@-webkit-keyframes tail {0% {width: 0;}30% {width: 100px;}100% {width: 0;}
}@keyframes tail {0% {width: 0;}30% {width: 100px;}100% {width: 0;}
}@-webkit-keyframes shining {0% {width: 0;}50% {width: 30px;}1000% {width: 0;}
}@keyframes shining {0% {width: 0;}50% {width: 30px;}1000% {width: 0;}
}@-webkit-keyframes shooting {0% {-webkit-transform: translateX(0);transform: translateX(0);}100% {-webkit-transform: translateX(300px);transform: translateX(300px);}
}@keyframes shooting {0% {-webkit-transform: translateX(0);transform: translateX(0);}100% {-webkit-transform: translateX(300px);transform: translateX(300px);}
}@-webkit-keyframes sky {0% {-webkit-transform: rotate(45deg);transform: rotate(45deg);}100% {-webkit-transform: rotate(405deg);transform: rotate(405deg);}
}@keyframes sky {0% {-webkit-transform: rotate(45deg);transform: rotate(45deg);}100% {-webkit-transform: rotate(405deg);transform: rotate(405deg);}
}
.height-auto {height: auto;
}

可以看到我们给每个流星雨都指定了特定的动画，并且使用到了关键帧，去改变方向。

2.3、my.js

// pages/my/my.js
let token;
const WXAPI = require('../../wxapi/index');Page({/*** 页面的初始数据*/data: {authFlag: false,userInfo: {},green_contribution: 0,cumulative_recovery: 0,accumulated_earnings: 0,skeletonLoading: true,},/**地址管理列表 */addressHandler() {wx.navigateTo({url: '/pages/address/address',})},/** 活动页面 */activeHandler() {wx.navigateTo({url: '/pages/active/active',})},/**获取个人积分情况 */getMemberPoints() {const self = this;WXAPI.userApi.getMemberPoints().then((res) => {console.log(res)if (res.meta && res.meta.status_code == 1) {self.setData({green_contribution: res.data.green_contribution,cumulative_recovery: res.data.cumulative_recovery,accumulated_earnings: res.data.accumulated_earnings,})}self.setData({skeletonLoading: false})}, (err) => {console.log(err)self.setData({skeletonLoading: false})})},recycleHandler() {wx.navigateTo({url: '/pages/wasterecovery/wasterecovery',})},adviceHandler() {wx.navigateTo({url: '/pages/advice/advice',})},  /*** 跳转我的订单*/orderHandler: function () {wx.switchTab({url: '/pages/order/order',})},// 授权判断authHandler: function () {const self = this;let authFlag = wx.getStorageSync('authFlag');if (authFlag) {token = wx.getStorageSync('token');this.getMemberPoints();let userInfo = wx.getStorageSync('userInfo')self.setData({userInfo,authFlag})}else {wx.navigateTo({url: '../authpage/authpage',})wx.showToast({title: '请先授权登录',icon: 'none'})}},/*** 生命周期函数--监听页面显示*/onShow: function () {this.authHandler()},
})

可以看到在js这里，我们引入了自己封装的api接口，如果只涉及到模版的话，这个引入可以删掉。

1、可以看到我们先将skeletonLoading骨架屏的状态设置成了true，让它已进入到个人页就开始展示，等数据请求回来，设置成false。
2、剩下的就是一些授权的判断。

2.4、my.json

{"usingComponents": {"van-skeleton": "@vant/weapp/skeleton/index"},"navigationBarTitleText": "个人中心"
}

可以看到我们这里引入了vant组件库的骨架屏。

如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持，如果你有更好的思路，也可留言指出。

微信小程序之流星雨个人页相关推荐

微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
微信小程序获取上一页路由获取从哪个页面跳转进来的
微信小程序获取上一页路由获取从哪个页面跳转进来的 var pages = getCurrentPages(); let prevpage = pages[pages.length - 2];//上一 ...
微信小程序----返回上一页刷新或当前页刷新
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组 ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序返回上一页并刷新
微信小程序返回上一页并刷新前提:使用Taro和react 函数组件(使用类组件的应该同理) useDidShow,可以在每一次进入该页面时,都能刷新页面.这样使用Taro.navigateTo跳转到 ...
零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...
微信小程序返回上一页的各种方法
微信小程序返回上一页的各种方法 1. navigator 这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是该方法不能跳转tabbar页面,保留当前页面,在wxml使用 <na ...
微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机；tabBar页获取不到参数问题；navigateTo跳转无效问题；onShow执行两次问题；
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
微信小程序-实现音乐播放页（flex）
音乐小程序播放页自适应布局,tab栏切换 index.wxml <image class="bg-img" mode="aspectFill" src=& ...

微信小程序之流星雨个人页

本文目录