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

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

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

实现效果图：

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

 navigationBarBackgroundColor : #AFE2E6 ,//bar背景颜色
 navigationBarTextStyle : white ,//bar字体颜色
 backgroundColor : white ,//背景颜色
 enablePullDownRefresh : true //下拉是否刷新

tabBar属性

完整代码如下（wxml）

 view 
 navigator url= #39;/pages/14/1 #39; 
 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选择图片或者拍照

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

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


以上就是微信小程序制作首页的实现的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！