相思资源网 Design By www.200059.com
微信小程序 首页制作简单实例
实现效果图:
首先从大的方面来讲,就是设置了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="/UploadFiles/2021-04-02/subway.jpg">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(){ // 页面关闭 }, })感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无微信小程序 首页制作简单实例的评论...