微信小程序制作首页的实现（小程序首页怎么制作）

微信小程序制作首页的实现（小程序首页怎么制作）

这篇文章主要介绍了微信小程序 首页制作简单实例的相关资料,需要的朋友可以参考下

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

实现效果图：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

首先从大的方面来讲，就是设置了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文件

{"navigationBarTitleText": "所有广从线"//bar内容}-

js文件

Page({data:{},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭},})-

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

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