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

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

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

实现效果图：

首先从大的方面来讲，就是设置了window的属性"navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色"navigationBarTextStyle": "white",//bar字体颜色"backgroundColor": "white",//背景颜色"enablePullDownRefresh": "true"//下拉是否刷新tabBar属性

完整代码如下（wxml）<view><navigator url='/pages/14/1'><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(){// 页面关闭},})以上就是微信开发之首页制作代码示例的详细内容，更多请关注小潘博客其它相关文章！