微信小程序制作首页的实现

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

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

实现效果图：

首先从大的方面来讲，就是设置了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(){// 页面关闭},})

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

相关推荐：

关于微信小程序中chooseImage选择图片或者拍照

微信小程序的自定义模态弹窗的介绍

关于微信小程序中欢迎页面的制作

以上就是微信小程序制作首页的实现的详细内容，更多请关注小潘博客其它相关文章！