微信小程序 首页制作简单实例
更新时间：2017年04月07日 15:13:30 作者：无悔和尚
这篇文章主要介绍了微信小程序 首页制作简单实例的相关资料,需要的朋友可以参考下
微信小程序 首页制作简单实例
实现效果图：
首先从大的方面来讲，就是设置了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(){
// 页面关闭
},
})
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Javascript设计模式之原型模式，原型模式用于在创建对象时，通过共享某个对象原型的属性和方法，从而达到提高性能、降低内存占用、代码复用的效果。下面小编将详细介绍 ,需要的朋友可以参考下2021-09-09
这篇文章主要为大家介绍了sockjs前端WebSocket二次封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
网上有很多关于JS常用正则表达式的文章很全但今天为大家分享一些最新，且非常有用的正则表达式其中有密码强度校验,金额校验,IE版本,IPv4,IPv6校验等2020-02-02
这篇文章主要介绍了微信小程序scroll-view组件详细介绍的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了移动开发之自适应手机屏幕宽度的相关资料,网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方,需要的朋友可以参考下2016-11-11
这篇文章主要为大家介绍了autojs绘画实现六边形示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了前端面试必会的网络跨域问题解决方法讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了前端使用xlsx库导出带有样式的excel文件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了解析Clipboard API剪贴板操作实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序 蓝牙的实现实例代码的相关资料,需要的朋友可以参考下2017-06-06
最新评论