微信小程序开发实战(云开发)--资产管理工具
Posted wzfblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发实战(云开发)--资产管理工具相关的知识，希望对你有一定的参考价值。
添加首页 menu页面
截图展示
menu.js源码
// pages/menu/menu.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
menu.json 源码
{
"usingComponents": {},
"navigationStyle": "custom",
"backgroundColor": "#fff",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "理财小助手",
"navigationBarTextStyle": "black"
}
menu.wxml 源码
<view class=‘cu-tabbar-height‘ style="min-height:180rpx">
<view class="userinfo-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
</view>
<view class="cu-card" style="margin-bottom:35rpx">
<view class="cu-item bg-img shadow-blur" style="background-image:url(‘images/qpct2148.jpg‘)">
<view class="cardTitle" style="font-weight:bolder">
你好 <open-data type="userNickName"></open-data>
</view>
</view>
</view>
<view class=‘nav-list‘>
<navigator open-type="navigate" hover-class=‘none‘ url="" class="nav-li bg-cyan" >
<view style="font-weight:bolder" class="nav-title">资产管理</view>
<view style="font-weight:bolder" class="nav-name">management</view>
<text class=‘cuIcon-rechargefill‘></text>
</navigator>
<navigator open-type="navigate" hover-class=‘none‘ url="" class="nav-li bg-blue" >
<view style="font-weight:bolder" class="nav-title">购买判断</view>
<view style="font-weight:bolder" class="nav-name">judge</view>
<text class=‘cuIcon-squarecheckfill‘></text>
</navigator>
<navigator open-type="navigate" hover-class=‘none‘ url="" class="nav-li bg-olive" >
<view style="font-weight:bolder" class="nav-title">使用说明</view>
<view style="font-weight:bolder" class="nav-name">instructions</view>
<text class=‘cuIcon-formfill‘></text>
</navigator>
<button open-type="contact" hover-class=‘none‘ style="width: 45%;margin: 0 0 40rpx;" class="nav-li bg-green" >
<view style="font-weight:bolder" class="nav-title" style="text-align:left">联系我们</view>
<view style="font-weight:bolder" class="nav-name" style="text-align:left">Contact</view>
<text class=‘cuIcon-friendaddfill‘ style=""></text>
</button>
</view>
<view class=‘cu-tabbar-height‘></view>
menu.wxss 源码
/* pages/menu/menu.wxss */
@import "../../colorui/main.wxss";
@import "../../colorui/icon.wxss";
page{
background-color: white;
}
.cardTitle{
color: #fff;
padding: 90rpx 60rpx;
font-size: 40rpx;
font-weight: 300;
transform: skew(-10deg, 0deg);
position: relative;
text-shadow: 0px 0px 6rpx rgba(0,0,0,0.3)
}
.cardTitle::before{
content: "";
position: absolute;
width: 60rpx;
height: 6rpx;
border-radius: 20rpx;
background-color: #fff;
display: block;
top: 60rpx;
left: 50rpx;
transform: skew(10deg, 0deg);
}
.cardTitle::after{
content: "";
position: absolute;
width: 140rpx;
border-radius: 6rpx;
height: 24rpx;
background-color: #fff;
display: block;
bottom: 76rpx;
left: 90rpx;
transform: skew(10deg, 0deg);
opacity: 0.1;
}
.scrollPage {
height: 100vh;
}
.nav-list {
display: flex;
flex-wrap: wrap;
padding: 0px 40rpx 0px;
justify-content: space-between;
}
.nav-li {
padding: 30rpx;
border-radius: 12rpx;
width: 45%;
margin: 0 0 40rpx;
background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.nav-li::after {
content: "";
position: absolute;
z-index: -1;
background-color: inherit;
width: 100%;
height: 100%;
left: 0;
bottom: -10%;
border-radius: 10rpx;
opacity: 0.2;
transform: scale(0.9, 0.9);
}
.nav-li.cur {
color: #fff;
background: rgb(94, 185, 94);
box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
}
.nav-title {
font-size: 32rpx;
font-weight: 300;
}
.nav-title::first-letter {
font-size: 40rpx;
margin-right: 4rpx;
}
.nav-name {
font-size: 28rpx;
text-transform: Capitalize;
margin-top: 20rpx;
position: relative;
}
.nav-name::before {
content: "";
position: absolute;
display: block;
width: 40rpx;
height: 6rpx;
background: #fff;
bottom: 0;
right: 0;
opacity: 0.5;
}
.nav-name::after {
content: "";
position: absolute;
display: block;
width: 100rpx;
height: 1px;
background: #fff;
bottom: 0;
right: 40rpx;
opacity: 0.3;
}
.nav-name::first-letter {
font-weight: bold;
font-size: 36rpx;
margin-right: 1px;
}
.nav-li text {
position: absolute;
right: 30rpx;
top: 30rpx;
font-size: 52rpx;
width: 60rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
}
.text-light {
font-weight: 300;
}
.userinfo-avatar {
overflow:hidden;
display: block;
width: 80rpx;
height: 80rpx;
margin-left: 50rpx;
margin-top: 70rpx;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.userinfo{
/* color: #fff; */
font-size: 14px;
background-color: #c0c0c0;
border-radius:40%;
}
合作项目/交朋友/问题咨询 请打开https://blog.iffmd.cn (https://blog.iffmd.cn)
以上是关于微信小程序开发实战(云开发)--资产管理工具的主要内容，如果未能解决你的问题，请参考以下文章