【組件庫】首頁功能模塊界面（2）
效果展示
靜態(tài)展示
動態(tài)展示
Demo代碼
js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//功能模塊
// functions: [{
// name: '時光荏苒',
// numbers: '',
// iconpath: '/images/code.png',
// classifier: "Share",
// color: "orange",
// path: "../code/code"
// },
// {
// name: '每日一題',
// numbers: "",
// color: "cyan",
// iconpath: '/images/topic.png',
// classifier: "Dayup",
// path: "../resources/resources",
// },
// {
// name: '小小學(xué)堂',
// numbers: '',
// color: "red",
// iconpath: '/images/choucang.png',
// classifier: "Study",
// path: "../works/works",
// },
// {
// name: '創(chuàng)意小屋',
// numbers: '',
// color: "purple",
// iconpath: '/images/shangcheng.png',
// classifier: "Happy",
// path: "../functions/functions",
// }
// ],
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
wxml
<view class="box">
<view class="item_1">
<!-- <view class="box_right">
<view class="box_righttop">時光荏苒</view>
<view class="box_rightlow"><text style="font-size:50rpx;margin:3rpx;color:red;">{{item.numbers}}</text>Study</view>
</view>
<view class="box_left">
<image class="box_img" src="/images/choucang.png"></image>
</view> -->
</view>
<view class="item_2 bg-cyan light">
<!-- <view class="box_right">
<view class="box_righttop">時光荏苒</view>
<view class="box_rightlow"><text style="font-size:50rpx;margin:3rpx;color:red;">{{item.numbers}}</text>Study</view>
</view>
<view class="box_left">
<image class="box_img" src="/images/choucang.png"></image>
</view> -->
</view>
<view class="item_3 bg-red light">
<!-- <view class="box_right">
<view class="box_righttop">時光荏苒</view>
<view class="box_rightlow"><text style="font-size:50rpx;margin:3rpx;color:red;">{{item.numbers}}</text>Study</view>
</view>
<view class="box_left">
<image class="box_img" src="/images/choucang.png"></image>
</view> -->
</view>
<view class="item_4 bg-purple light">
<!-- <view class="box_right">
<view class="box_righttop">時光荏苒</view>
<view class="box_rightlow"><text style="font-size:50rpx;margin:3rpx;color:red;">{{item.numbers}}</text>Study</view>
</view>
<view class="box_left">
<image class="box_img" src="/images/choucang.png"></image>
</view> -->
</view>
<view class="circlex">
<view class="loading">
<view class="wave"></view>
</view>
</view>
</view>
wxss
.box {
position: relative;
width: 90%;
height: 420rpx;
margin: 50% auto;/*整個模塊的位置 可以自己修改*/
/* background: #000; */
}
.item_1 {
position: absolute;
top: 0px;
left: 0px;
width: 48%;
height: 200rpx;
border-radius: 16rpx;
background-color: #fde6d2;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.item_1 .fun_name {
position: relative;
width: 100%;
height: 40%;
/* background-color: red; */
padding-top: 10%;
padding-left: 20%;
line-height: 100%;
align-items: center;
font-size: 30rpx;
}
.item_1 .fun_icon {
width: 100%;
height: 60%;
}
.box_img {
width: 120rpx;
height: 120rpx;
}
.item_2 {
position: absolute;
top: 0px;
right: 0px;
width: 48%;
height: 200rpx;
border-radius: 16rpx;
background-color: #cce6ff;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item_3 {
position: absolute;
bottom: 0;
left: 0px;
width: 48%;
height: 200rpx;
background-color: #fadbd9;
border-radius: 16rpx;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item_4 {
position: absolute;
/* top: 220rpx; */
bottom: 0;
right: 0px;
width: 48%;
height: 200rpx;
background-color: #e1d7f0;
border-radius: 16rpx;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.circlex {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200rpx;
height: 200rpx;
border-radius: 50%;
background-color: #fff;
overflow: hidden;
}
.circlex .loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 170rpx;
height: 170rpx;
/* background-color:red; */
border-radius: 50%;
background: #b0f4ff;
border-radius: 50%;
overflow: hidden;
animation: loadingBreath 12s infinite linear;
}
.circlex .loading::before {
content: 'Haihong';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
letter-spacing: 2px;
color: #10a789;
font-family: sans-serif;
z-index: 2;
}
.circlex .loading::after {
content: '';
position: absolute;
width: 100%;
height: 25%;
bottom: 0;
background-image: linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1);
animation: loadingRun 5.2s linear infinite;
}
.wave::before {
content: '';
position: absolute;
left: -50%;
width: 200%;
height: 200%;
z-index: 1;
background-color: #85f7fb;
border-radius: 52% 25% 62% 69%/25% 38%;
animation: loadingWave 5.2s linear infinite;
}
.wave::after {
content: '';
position: absolute;
left: -50%;
width: 200%;
height: 200%;
z-index: 1;
background-color: #d0f4ff;
border-radius: 42% 38% 40% 62%/28% 35%;
animation: loadingWave 5.2s ease-in-out infinite;
}
.middle {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
transform: translate3d(0, 0, 0);
opacity: 1;
}
.middle_box {
width: 48%;
margin-top: 10rpx;
margin-bottom: 10rpx;
height: 200rpx;
background: yellowgreen;
border-radius: 16rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.box_right {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
vertical-align: center;
justify-content: center;
}
.box_righttop {
padding-top: 40rpx;
padding-left: 30rpx;
width: 100%;
height: 100rpx;
font-size: 30rpx;
}
.box_rightlow {
width: 110%;
height: 100rpx;
padding-top: 00rpx;
padding-left: 40rpx;
}
.box_left {
width: 50%;
}
.box_img {
margin-top: 50rpx;
margin-left: 20rpx;
width: 120rpx;
height: 120rpx;
}
.circle {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, 0);
width: 200px;
height: 200px;
background: #b0f4ff;
border-radius: 50%;
overflow: hidden;
animation: loadingBreath 2s infinite linear;
}
/* 呼吸燈動畫 */
@keyframes loadingBreath {
0% {
box-shadow: 0 0 5px 0 #85f7fb;
}
25% {
box-shadow: 0 0 20px 0 #85f7fb;
}
50% {
box-shadow: 0 0 5px 0 #85f7fb;
}
75% {
box-shadow: 0 0 20px 0 #85f7fb;
}
100% {
box-shadow: 0 0 5px 0 #85f7fb;
}
}
/* 底部液體上升動畫 */
@keyframes loadingRun {
0% {
height: 25%;
}
100% {
height: 100%;
}
}
/* wave動畫 */
@keyframes loadingWave {
0% {
top: -100%;
transform: rotate(0);
}
100% {
top: -200%;
transform: rotate(360deg);
}
}
結(jié)語
這種樣式的模塊是挺早以前就有點(diǎn)感覺
前一段時間沒事寫了寫
感覺還是有點(diǎn)不太行
主要是title、icon位置不知道咋放才顯得美觀一點(diǎn)（注釋代碼可以去掉 看看效果圖 自己感覺不好看就注釋了）
「文章僅作為學(xué)習(xí)筆記，記錄從0到1的一個過程」
希望對您有所幫助，如有錯誤歡迎小伙伴指正～
評論
圖片
表情