微信小程序首頁界面布局、自定義頂部狀態(tài)欄、3D輪播圖效果
使用swiper實現(xiàn)3D輪播圖效果，自定義頂部狀態(tài)欄，具體代碼：
1、js代碼
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
barHeight: 20, // 頂部狀態(tài)欄高度
navBarHeight: 66, // 頂部高度
viewHeight: 640, // 默認高度
current: 0,
background: [
'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/866dd9891938e90b52ec87522b678a28b540c9244c3b38004ca3670776237550954b02f3e73351f2a43c980075659c79?pictype=scale&from=30113&version=3.3.3.3&fname=1684975111844.jpeg&size=750',
'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/7f881ce187cb0bb0924fc28e94b7e80895d93a035c3e997c4f25229253418c5b78546bbdff1024dee3dc2da40a7da940?pictype=scale&from=30113&version=3.3.3.3&fname=1684975459289.jpeg&size=750',
'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2e2fda72ef58b91dcb1bd185062479dee49a24d14302c69a9f8a5e7f1032c451b81e10203aa09efe85745f6a49722be2?pictype=scale&from=30113&version=3.3.3.3&fname=1684975468378.jpeg&size=750'
],
tabList: [{
id: '1',
src: '../../images/rank.png',
title: '菜單一'
},
{
id: '2',
src: '../../images/tv.png',
title: '菜單二'
},
{
id: '3',
src: '../../images/music.png',
title: '菜單三'
},
{
id: '4',
src: '../../images/tv.png',
title: '菜單四'
},
{
id: '4',
src: '../../images/rank.png',
title: '菜單四'
}
],
dataList: [{
title: '進入我的主頁，更多界面，供大家分享！',
money: '29.99',
number: '897',
src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2e2fda72ef58b91dcb1bd185062479dee49a24d14302c69a9f8a5e7f1032c451b81e10203aa09efe85745f6a49722be2?pictype=scale&from=30113&version=3.3.3.3&fname=1684975468378.jpeg&size=750'
},
{
title: '進入我的主頁，更多界面，供大家分享！',
money: '5.99',
number: '578',
src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2e2fda72ef58b91dcb1bd185062479dee49a24d14302c69a9f8a5e7f1032c451b81e10203aa09efe85745f6a49722be2?pictype=scale&from=30113&version=3.3.3.3&fname=1684975468378.jpeg&size=750'
},
{
title: '有需要的用戶，請點贊、關(guān)注加收藏哦，進入我的主頁，更多界面，供大家分享！',
money: '9.99',
number: '78',
src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/866dd9891938e90b52ec87522b678a28b540c9244c3b38004ca3670776237550954b02f3e73351f2a43c980075659c79?pictype=scale&from=30113&version=3.3.3.3&fname=1684975111844.jpeg&size=750'
},
{
title: '更多小程序首頁模板示例，請關(guān)注我！',
money: '19.99',
number: '478',
src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/866dd9891938e90b52ec87522b678a28b540c9244c3b38004ca3670776237550954b02f3e73351f2a43c980075659c79?pictype=scale&from=30113&version=3.3.3.3&fname=1684975111844.jpeg&size=750'
},
{
title: '進入我的主頁，更多界面，供大家分享！',
money: '39.99',
number: '378',
src: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/7f881ce187cb0bb0924fc28e94b7e80895d93a035c3e997c4f25229253418c5b78546bbdff1024dee3dc2da40a7da940?pictype=scale&from=30113&version=3.3.3.3&fname=1684975459289.jpeg&size=750'
},
]
},
bindchange(e) {
this.setData({
current: e.detail.current
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady() {
var that = this;
// 膠囊信息
var menu = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success(res) {
that.setData({
barHeight: res.statusBarHeight,
navBarHeight: menu.top + menu.height + 6,
viewHeight: res.windowHeight
})
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload() {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom() {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage() {
}
})
2、wxml代碼
<view class="bar-box" style="height: {{navBarHeight}}px;">
<view class="level" style="margin-top: {{barHeight}}px;">
<view class="level bar">
<image class="top-head" src="../../images/money.jpeg" mode="widthFix"></image>
<view class="welcome">嗨 兄嘚，歡迎使用！</view>
</view>
</view>
</view>
<view class="swiper-box">
<swiper class="swiper" indicator-dots="true" indicator-active-color="#10AEFF" style="height: {{viewHeight*0.23}}px;padding-top: {{navBarHeight+10}}px;" bindchange="bindchange" autoplay="true" interval="3000" duration="500" previous-margin="20px" next-margin="20px" circular="{{true}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item class="swiper-item">
<image src="{{item}}" style="height: {{current == index ?viewHeight*0.22:viewHeight*0.18}}px;" class="item-img {{current == index ? 'active-img': ''}}"></image>
</swiper-item>
</block>
</swiper>
</view>
<!-- 二級菜單 -->
<view class="level tab-box">
<block wx:for="{{tabList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
<view class="tab-list">
<image class="tab-img" src="{{item.src}}" mode="widthFix"></image>
<view class="tab-text">{{item.title}}</view>
</view>
</block>
</view>
<view class="step-box">
<progress percent="66" color="#10AEFF" backgroundColor="#ecf5ff" border-radius="50" active stroke-width="10" />
<view class="level step">
<view>今日已運動80分鐘</view>
<view>目標120分鐘</view>
</view>
</view>
<!-- 數(shù)據(jù)列表 -->
<view class="data-box">
<view class="level">
<view class="line"></view>
<view class="title">列表內(nèi)容</view>
</view>
<view class="data-list">
<block wx:for="{{dataList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
<view class="col-info" style="{{index%2==0?'margin-right: 1%;':'margin-left: 1%;'}}">
<image src="{{item.src}}" class="row-img" mode="widthFix"></image>
<view class="row-title">{{item.title}}</view>
<view class="row-money">
<text class="row-num">￥{{item.money}}</text>
<text class="row-buy">{{item.number}}人已購買</text>
</view>
</view>
</block>
</view>
</view>
3、wxss代碼
.level {
display: flex;
align-items: center;
}
/* 狀態(tài)欄 */
.bar-box {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.bar-title {
text-align: center;
font-size: 34rpx;
color: white;
}
.bar {
width: 80%;
margin-right: 30%;
margin-top: 1.5%;
margin-left: 20rpx;
}
.top-head {
width: 15%;
border-radius: 50%;
box-shadow: 0 0 5rpx 5rpx #f1f1f1;
}
.welcome {
margin-left: 20rpx;
font-size: 30rpx;
font-weight: bold;
}
/* 輪播圖 */
.swiper-box {
margin: 20rpx 0;
}
.swiper {
width: 100%;
}
.swiper-item {
display: flex;
align-items: center;
}
.item-img {
border-radius: 15rpx;
opacity: 0.7;
}
.active-img {
opacity: 1;
z-index: 10;
margin: 0 20rpx;
transition: all .2s ease-in 0s;
}
/* 二級菜單 */
.tab-box {
margin: 30rpx 20rpx 30rpx;
box-shadow: 0 0 5rpx 5rpx #f1f1f1;
padding: 6% 0;
border-radius: 20rpx;
}
.tab-list {
flex: 1;
text-align: center;
color: gray;
}
.tab-img {
width: 50%;
}
.tab-text {
font-size: 30rpx;
margin: 5rpx 0;
}
.step-box {
margin: 20rpx 20rpx 30rpx;
box-shadow: 0 0 5rpx 5rpx #f1f1f1;
padding: 5% 20rpx;
border-radius: 20rpx;
}
.step {
justify-content: space-between;
font-size: 30rpx;
margin-top: 20rpx;
}
/* 數(shù)據(jù)列表 */
.data-box {
margin: 20rpx;
position: relative;
}
.line {
width: 10rpx;
height: 34rpx;
border-radius: 50rpx;
background-color: #10AEFF;
}
.title {
margin-left: 10rpx;
font-size: 30rpx;
font-weight: bold;
}
.data-list {
margin-top: 30rpx;
margin-bottom: 20rpx;
display: flex;
flex-wrap: wrap;
}
.col-info {
width: 49%;
background-color: #f1f1f1;
margin-bottom: 20rpx;
border-bottom-left-radius: 15rpx;
border-bottom-right-radius: 15rpx;
}
.row-img {
width: 100%;
border-top-left-radius: 15rpx;
border-top-right-radius: 15rpx;
}
.row-title {
font-size: 30rpx;
padding: 0 5rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.row-money {
padding: 20rpx 10rpx;
display: flex;
justify-content: space-between;
}
.row-num {
color: red;
font-size: 32rpx;
}
.row-buy {
font-size: 28rpx;
color: gray;
}
4、json代碼文章來源：http://www.zghlxwxcb.cn/news/detail-498166.html
{
"usingComponents": {},
"navigationStyle": "custom"
}
如需要下載完整版，包含監(jiān)聽事件、圖片文件等，請前往下方鏈接，下載完整版，下載后直接使用微信開發(fā)者工具打開即可，下載鏈接為：
小程序完整版界面（示例二）文章來源地址http://www.zghlxwxcb.cn/news/detail-498166.html
到了這里，關(guān)于微信小程序首頁、界面布局、3D輪播圖效果（示例二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
