微信小程序 首页制作简单实例
实现效果图：
首先从大的方面来讲，就是设置了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(){
// 页面关闭
},
})版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。