Diseño de la interfaz de la página de inicio del subprograma WeChat, barra de estado superior personalizada, efecto de imagen de carrusel 3D
Use swiper para lograr un efecto de carrusel 3D, personalice la barra de estado superior, código específico:
1. código 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. código 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. código 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. Código JSON
{
"usingComponents": {
},
"navigationStyle": "custom"
}
Si necesita descargar la versión completa, incluidos los eventos de monitoreo, los archivos de imágenes, etc., vaya al siguiente enlace para descargar la versión completa. Después de la descarga, puede usar directamente la herramienta para desarrolladores de WeChat para abrirla. El enlace de descarga es : Mini interfaz de versión completa del programa (Ejemplo 2
)