效果图如下

首先从大的方面来讲，就是设置了window的属性

"navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色
"navigationBarTextStyle": "white",//bar字体颜色
"backgroundColor": "white",//背景颜色
"enablePullDownRefresh": "true"//下拉是否刷新

tabBar属性

完整代码如下（w

<view>
<navigator url='/pages/14/1'>
<view >
<view >1</view>
<view >广从1号线</view>
<view >市汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
</view>
</navigator>
<navigator url='/pages/14/2'>
<view >
<view >2</view>
<view >广从2号线</view>
<view >芳村汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
</view>
</navigator>
<navigator url='/pages/14/3'>
<view >
<view >3</view>
<view >广从3号线</view>
<view >罗冲围汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/4'>
<view >
<view >4</view>
<view >广从4快号线</view>
<view >天河客运站 -从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
</view>
</navigator>
<navigator url='/pages/14/5'>
<view >
<view >4</view>
<view >广从4线</view>
<view >天河客运站 -从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
</view>
</navigator>
<navigator url='/pages/14/6'>
<view >
<view >5</view>
<view >广从5号线</view>
<view >东站汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
</view>
</navigator>
<navigator url='/pages/14/7'>
<view >
<view >6</view>
<view >广从6号线</view>
<view >东圃客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/8'>
<view >
<view >7</view>
<view >广从7号线</view>
<view >黄埔客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/9'>
<view >
<view >8</view>
<view >广从8号线</view>
<view >广园汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/10'>
<view >
<view >8</view>
<view >广从8快线</view>
<view >广园汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/11'>
<view >
<view >9</view>
<view >广从9号线</view>
<view >滘口汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/12'>
<view >
<view >10</view>
<view >广从10号线</view>
<view >越秀南客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/13'>
<view >
<view >10</view>
<view >广从10快线</view>
<view >越秀南客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
<view >></view>
</view>
</navigator>
<navigator url='/pages/14/14'>
<view >
<view >11</view>
<view >广从11号线</view>
<view >海珠汽车客运站-从化汽车站</view>
<image src='/images/loading.gif' data-original="http://www.cnblogs.com//assets/images/subway.jpg" />
</view>
</navigator>
</view>

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(){
// 页面关闭
},

})

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：微信小程序首页总结

关键词：小程序