这篇文章主要介绍了微信小程序 首页制作简单实例的相关资料,需要的朋友可以参考下
微信小程序 首页制作简单实例
实现效果图：
首先从大的方面来讲，就是设置了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{
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文件
WeWedding婚纱影楼小程序
下载
婚纱影楼小程序提供了一个连接用户与影楼的平台，相当于影楼在微信的官网。它能帮助影楼展示拍摄实力，记录访客数据，宣传优惠活动。使用频率高，方便传播，是影楼在微信端宣传营销的得力助手。功能特点：样片页是影楼展示优秀摄影样片提供给用户欣赏并且吸引客户的。套系页是影楼根据市场需求推出的不同套餐，用户可以按照自己的喜好预定套系。个人中心可以查看用户预约的拍摄计划，也可以获取到影楼的联系方式。
{
"navigationBarTitleText": "所有广从线"//bar内容
}
js文件
Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
