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

小编给大家分享一下微信小程序如何制作首页,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联建站长期为1000多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为大理州企业提供专业的成都做网站、成都网站制作、成都外贸网站建设大理州网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

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

实现效果图:

微信小程序如何制作首页

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

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

tabBar属性

完整代码如下(wxml)

<view>
<navigator url='/pages/14/1'>
<view class="waylist">
<view class="im im1">1</view>
<view class="way">广从1号线</view>
<view class="ste">市汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url='/pages/14/2'>
<view class="waylist">
<view class="im im2">2</view>
<view class="way">广从2号线</view>
<view class="ste">芳村汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url='/pages/14/3'>
<view class="waylist">
<view class="im im3">3</view>
<view class="way">广从3号线</view>
<view class="ste">罗冲围汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/4'>
<view class="waylist">
<view class="im im4">4</view>
<view class="way">广从4快号线</view>
<view class="ste">天河客运站 -从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url='/pages/14/5'>
<view class="waylist">
<view class="im im4">4</view>
<view class="way">广从4线</view>
<view class="ste">天河客运站 -从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url='/pages/14/6'>
<view class="waylist">
<view class="im im5">5</view>
<view class="way">广从5号线</view>
<view class="ste">东站汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url='/pages/14/7'>
<view class="waylist">
<view class="im im6">6</view>
<view class="way">广从6号线</view>
<view class="ste">东圃客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/8'>
<view class="waylist">
<view class="im im7">7</view>
<view class="way">广从7号线</view>
<view class="ste">黄埔客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/9'>
<view class="waylist">
<view class="im im8">8</view>
<view class="way">广从8号线</view>
<view class="ste">广园汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/10'>
<view class="waylist">
<view class="im im8">8</view>
<view class="way">广从8快线</view>
<view class="ste">广园汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/11'>
<view class="waylist">
<view class="im im9">9</view>
<view class="way">广从9号线</view>
<view class="ste">滘口汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/12'>
<view class="waylist">
<view class="im im10">10</view>
<view class="way">广从10号线</view>
<view class="ste">越秀南客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/13'>
<view class="waylist">
<view class="im im10">10</view>
<view class="way">广从10快线</view>
<view class="ste">越秀南客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url='/pages/14/14'>
<view class="waylist">
<view class="im im11">11</view>
<view class="way">广从11号线</view>
<view class="ste">海珠汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
</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(){
// 页面关闭
},
})

看完了这篇文章,相信你对“微信小程序如何制作首页”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!

分享题目:微信小程序如何制作首页-创新互联
网站链接:https://www.cdcxhl.com/article32/cecgsc.html

成都网站建设公司_创新互联,为您提供定制网站网站营销动态网站建站公司商城网站品牌网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设