标签栏和布局的练习--婚礼邀请函案例
说明:
- 关于第三页美好时光页面里的视频,没找到合适的视频外链,关于视频的插入没有做。
- 喜欢的可以点个赞,如果有问题或者想要完整的项目代码及素材,评论区有百度云链接。
效果图及需求分析:
- 案例分析:小程序共5个页面,其中第一页为信息展示页。右上角的光盘可播放背景音乐;中间部分的电话图标可跳转到拨号。第二页为照片页。用竖向轮播图的方式展示照片。第三页为美好时光页。可以播放视频。第四页为婚礼地点的地图页。点击标记点可以打开地图,用以导航。第五页为宾客信息页。收集参加婚礼的宾客的信息,其中参加人数用Picker组件来弹出选择。
- 遇到的问题:z-index属性的使用;
- 效果图:
bug:
- 预览时背景音乐的播放音频出现错误,而在开发者工具中确可以正常的使用。
代码部分:
- 给出项目目录结构和app.json的代码,这次的代码和素材有点多且乱。
app.json
{
"pages":[
"pages/invate/invate",
"pages/photo/photo",
"pages/time/time",
"pages/map/map",
"pages/customer/customer"
],
"window":{
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "wedding invating letter",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#ccc",
"selectedColor": "#ff4c91",
"borderStyle": "black",
"backgroundColor":"#fff",
"list": [
{"pagePath": "pages/invate/invate","iconPath": "./icon/信封.png","selectedIconPath": "./icon/信封1.png","text": "邀请函"},
{"pagePath": "pages/photo/photo","iconPath": "./icon/照片.png","selectedIconPath": "./icon/照片1.png","text": "照片"},
{"pagePath": "pages/time/time","iconPath": "./icon/视频.png","selectedIconPath": "./icon/视频1.png","text": "美好时光"},
{"pagePath": "pages/map/map","iconPath": "./icon/地图.png","selectedIconPath": "./icon/地图1.png","text": "附近地点"},
{"pagePath": "pages/customer/customer","iconPath": "./icon/人员信息.png","selectedIconPath": "./icon/人员信息1.png","text": "人员信息"}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"requiredBackgroundModes": ["audio", "location"]
}