微信小程序首页界面布局、自定义顶部状态栏、3D轮播图效果
使用swiper实现3D轮播图效果，自定义顶部状态栏，具体代码：
1、js代码
Page({
/**
* 页面的初始数据
*/
data: {
barHeight: 20, // 顶部状态栏高度
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: '有需要的用户，请点赞、关注加收藏哦，进入我的主页，更多界面，供大家分享！',
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: '更多小程序首页模板示例，请关注我！',
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
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
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
})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
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>
<!-- 数据列表 -->
<view class="data-box">
<view class="level">
<view class="line"></view>
<view class="title">列表内容</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;
}
/* 状态栏 */
.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;
}
/* 数据列表 */
.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代码文章来源：https://www.toymoban.com/news/detail-498166.html
{
"usingComponents": {},
"navigationStyle": "custom"
}
如需要下载完整版，包含监听事件、图片文件等，请前往下方链接，下载完整版，下载后直接使用微信开发者工具打开即可，下载链接为：
小程序完整版界面（示例二）文章来源地址https://www.toymoban.com/news/detail-498166.html
到了这里，关于微信小程序首页、界面布局、3D轮播图效果（示例二）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
