⼩程序——婚礼邀请函页⾯
1、主体页⾯和导航栏样式app.json
"pages": [
"pages/index/index",
"pages/picture/picture",
"pages/video/video",
"pages/map/map",
"pages/guest/guest"
],
"requiredBackgroundModes": ["audio"],
"window": {
"navigationBarBackgroundColor": "#ff4c91",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
其中"requiredBackgroundModes": ["audio"]为⾳乐播放配置
2、底部标签栏
tabBar⽤于实现页⾯底部的标签栏，主要属性如下，其中list是⼀个数组，数组中的每⼀个元素都是⼀个标签按钮对象，设置对应的属性时，可以跳转到对应的标签页。
属性说明
color未选择时，底部导航栏颜⾊
selectedColor选中时，底部导航栏颜⾊
borderStyle底部导航边框颜⾊
backgroundColor底部导航背景⾊
list导航配置数组
pagePath页⾯访问地址
iconPath未选择时图⽚路径
selectedIconPath选中时图⽚路径
text导航图标下⽅⽂字
3、在app.json中添加如下代码，完成标签栏的配置
"tabBar": {
"color": "black",
"selectedColor": "#ff4c91",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/invite.png",
"selectedIconPath": "images/invite.png",
"text": "邀请函"
},
{
"pagePath": "pages/picture/picture",
"iconPath": "images/marry.png",
"selectedIconPath": "images/marry.png",
"text": "照⽚"
},
{
"pagePath": "pages/video/video",
"iconPath": "images/video.png",
"selectedIconPath": "images/video.png",
"text": "美好时光"
},
{
"pagePath": "pages/map/map",
"iconPath": "images/map.png",
"selectedIconPath": "images/map.png",
"text": "婚礼地点"
},
{
"pagePath": "pages/guest/guest",
"iconPath": "images/guest.png",
"selectedIconPath": "images/guest.png",
selectediconpath什么意思"text": "宾客信息"
}
]
},
4、页⾯的公共样式app.wxss
page{
font-family: Helvetica Neue,Arial, Helvetica, sans-serif ;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
justify-content: space-between；使各项周围都留有空⽩5、邀请函的内部结构index.wxss
<!-- 显⽰歌曲播放暂停的⼩图标 -->
<view class="player player-{{isPlayingMusic ? 'play':'pause'}}" bindtap="play">  <image src="/images/music_icon.jpg"></image>
<image src="/images/music_play.png"></image>
</view>
<!-- 背景图⽚ -->
<image class="bg" src="/images/bg_1.png"></image>
<!-- 内容区域 -->
<view class="content">
<!-- 顶部图⽚区域 -->
<image class="content-gif" src="/images/save_the_date.gif"></image>
<!-- 标题 -->
<view class="content-title">邀请函</view>
<!-- 新郎和新娘合照 -->
<view class="content-avatar">
<image src="/images/avatar.png"></image>
</view>
<!-- 新郎和新娘的名字 -->
<view class="content-info">
<view class="content-name" bindtap="callGroom">
<image src="/images/tel.png"></image>
<view>王⼩名</view>
<view>新郎</view>
</view>
<view class="content-wedding">
<image src="/images/wedding.png"></image>
</view>
<view class="content-name" bindtap="callBride">
<image src="/images/tel.png"></image>
<view>张⼩红</view>
<view>新娘</view>
</view>
</view>
<!-- 婚礼信息 -->
<view class="content-address">
<view>我们曾邀你来参加我们的婚礼</view>
<view>时间：2021年10⽉11</view>
<view>地点：河南省周⼝市曦皇⼤酒店</view>
</view>
</view>
6、样式控制
/* 显⽰歌曲播放暂停的⼩图标 */
.player{
position: fixed;
top:20rpx;
right:20rpx;
/
* 元素的堆叠顺序，防⽌被content中的内容覆盖在下⾯ */
z-index: 1;
}
.player>image:first-child{
width: 80rpx;
height: 80rpx;
border: 1rpx solid #ffffff;
border-radius: 50%;
/* 将动画与div绑定,musicRotate只是起的⼀个名字 */
animation: musicRotate 3s linear infinite;
}
/
* 对唱胶动画设置 */
@keyframes musicRotate{
from{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.player>image:last-child{
width: 28rpx;
height:80rpx;
margin-left: -5px;
}
/* 对唱胶图标设置旋转和暂停以及唱臂的移⼊和移出 */ .player-play>image:first-child{
animation-play-state: running;
}
.player-pause>image:last-child{
animation: musicStart 0.2s linear forwards;
}
.player-pause>image:first-child{
animation-play-state: paused;
}
.player-pause>image:last-child{
animation: musicStop 0.2 linear forwards;
}
@keyframes musicStart{
from{
transform: rotate(0deg);
}
to{
transform: rotate(20deg);
}
}
@keyframes musicStop{
from{
transform: rotate(20deg);
}
to{
transform: rotate(0deg);
}
}
/* 背景图⽚ */
.
bg{
width: 100vw;
height: 100vh;
}
.content{
width: 100vw;
height: 100vh;
/* 绝对定位元素，相对于浏览器 */
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.content-gif{
width: 19vh;
height: 18.6vh;
margin-bottom: 1.5vh;
}
.content-title{
font-size: 5vh;
color: #ff4c91;
text-align: center;
margin-bottom: 2.5vh;
}
/* 新郎新娘合照 */
.content-avatar image{
width: 24vh;
height: 24vh;
border: 3rpx solid #ff4c91;
border-radius: 50%;
}
/* 新郎新郎电话区 */
.content-info{
width:45vh;
text-align: center;
margin-top: 4vh;
display: flex;
align-items: center;
}
.content-wedding{
flex: 1;
}
.content-wedding>image{
width:5.5vh;
height:5.5vh;
margin-left: 20rpx;
}
.content-name{
color: #ff4c91;
font-size: 2.7vh;
line-height: 4.5vh;
font-weight: bold;
position: relative;
}
.content-name>image{
width: 2.6vh;
height: 2.6vh;
border: 1px solid #ff4c91;
border-radius: 50%;
position: absolute;
top:-1vh;
right:-3.6vh;
}
.content-address{
margin-top: 5vh;
color: #ec5f89;
font-size: 2.5vh;
font-weight: bold;
text-align: center;
line-height: 4.5vh;
}
.content-address view:first-child{
font-size: 3vh;
padding-bottom: 2vh;
}
7、在index.js中编写背景⾳频播放的代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。