所属分类：php教程
微信小程序 首页制作简单实例
实现效果图：
程序员必备接口测试调试工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试，同时在线协作，内容实时同步
首先从大的方面来讲，就是设置了window的属性
微博登录
QQ登录"navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色
"navigationBarTextStyle": "white",//bar字体颜色
"backgroundColor": "white",//背景颜色
"enablePullDownRefresh": "true"//下拉是否刷新
登录后复制tabBar属性
完整代码如下（wxml）
1
广从1号线
市汽车客运站-从化汽车站
2
广从2号线
芳村汽车客运站-从化汽车站
3
广从3号线
罗冲围汽车客运站-从化汽车站
>
4
广从4快号线
天河客运站 -从化汽车站
4
广从4线
天河客运站 -从化汽车站
5
广从5号线
东站汽车客运站-从化汽车站
6
广从6号线
东圃客运站-从化汽车站
>
7
广从7号线
黄埔客运站-从化汽车站
>
8
广从8号线
广园汽车客运站-从化汽车站
>
8
广从8快线
广园汽车客运站-从化汽车站
>
9
广从9号线
滘口汽车客运站-从化汽车站
>
10
广从10号线
越秀南客运站-从化汽车站
>
10
广从10快线
越秀南客运站-从化汽车站
>
11
广从11号线
海珠汽车客运站-从化汽车站
登录后复制wxss
.waylist{
display: flex;
border-bottom: 1px solid gray;
font-size: 13px;
}
.waylist view{
height:40px;
line-height: 40px;
}
.waylist .im{
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
color:white;
margin-top: 7.5px;
margin-right: 5px;
border-radius: 50px;
margin-left: 5px;
}
.ste{
color:gray;
text-align: left;
font-size: 12px;
width: 60%;
}
.way{
width: 30%;
}
.jian{
text-align: right;
font-size: 20px;
color:gray;
}
.hidden{
visibility: hidden;
}
image{
margin-top:5px;
}
.im1{
}
.im2{
}
.im3{
}
.im4{
}
.im5{
}
.im6{
}
.im7{
}
.im8{
}
.im9{
}
.im10{
}
.im11{
}登录后复制json文件
{
"navigationBarTitleText": "所有广从线"//bar内容
}登录后复制js文件
Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
})登录后复制以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于微信小程序中chooseImage选择图片或者拍照
微信小程序的自定义模态弹窗的介绍
关于微信小程序中欢迎页面的制作
以上就是微信小程序制作首页的实现的详细内容，更多请关注zzsucai.com其它相关文章！
