微信开发之首页制作代码示例

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

实现效果图：

首先从大的方面来讲，就是设置了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(){  // 页面关闭  },  })

以上就是微信开发之首页制作代码示例的详细内容，更多内容请关注技术你好其它相关文章！