微信小程序 首页制作简单实例

实现效果图：

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

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

tabBar属性

完整代码如下（wxml）

<view><navigator url='/pages/14/1'><view class="waylist"><view class="im im1">1</view><view class="way">广从1号线</view><view class="ste">市汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" /></view></navigator><navigator url='/pages/14/2'><view class="waylist"><view class="im im2">2</view><view class="way">广从2号线</view><view class="ste">芳村汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" /></view></navigator><navigator url='/pages/14/3'><view class="waylist"><view class="im im3">3</view><view class="way">广从3号线</view><view class="ste">罗冲围汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/4'><view class="waylist"><view class="im im4">4</view><view class="way">广从4快号线</view><view class="ste">天河客运站 -从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" /></view></navigator><navigator url='/pages/14/5'><view class="waylist"><view class="im im4">4</view><view class="way">广从4线</view><view class="ste">天河客运站 -从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" /></view></navigator><navigator url='/pages/14/6'><view class="waylist"><view class="im im5">5</view><view class="way">广从5号线</view><view class="ste">东站汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" /></view></navigator><navigator url='/pages/14/7'><view class="waylist"><view class="im im6">6</view><view class="way">广从6号线</view><view class="ste">东圃客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/8'><view class="waylist"><view class="im im7">7</view><view class="way">广从7号线</view><view class="ste">黄埔客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/9'><view class="waylist"><view class="im im8">8</view><view class="way">广从8号线</view><view class="ste">广园汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/10'><view class="waylist"><view class="im im8">8</view><view class="way">广从8快线</view><view class="ste">广园汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/11'><view class="waylist"><view class="im im9">9</view><view class="way">广从9号线</view><view class="ste">滘口汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/12'><view class="waylist"><view class="im im10">10</view><view class="way">广从10号线</view><view class="ste">越秀南客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/13'><view class="waylist"><view class="im im10">10</view><view class="way">广从10快线</view><view class="ste">越秀南客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" /><view class="jian">></view></view></navigator><navigator url='/pages/14/14'><view class="waylist"><view class="im im11">11</view><view class="way">广从11号线</view><view class="ste">海珠汽车客运站-从化汽车站</view><image src="/assets/images/subway.jpg" style="width:30px; height:30px;" /></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(){// 页面关闭},})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！