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

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

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

实现效果图：

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

"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{

hhttp://eight: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(){

// 页面关闭

},

})

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。