资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

微信小程序中如何制作首页-创新互联

小编给大家分享一下微信小程序中如何制作首页,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联于2013年开始,先为嫩江等服务建站,嫩江等地企业,进行企业商务咨询服务。为嫩江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

实现效果图:

微信小程序中如何制作首页

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

以上是“微信小程序中如何制作首页”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:微信小程序中如何制作首页-创新互联
URL链接:http://cdkjz.cn/article/hgpio.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220