微信小程序自定义配置顶部栏顶部栏搜索框

2020-05-2215:50:25APP与小程序开发Comments2,227 views字数 1777阅读模式

1.配置信息:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

"window":{"backgroundTextStyle":"light",//非自定义字体位置"navigationBarBackgroundColor":"#fff",//非自定义背景颜色"navigationBarTitleText":"项目名",//标题"navigationBarTextStyle":"white",//右上交三个点和关闭按钮颜色只能配置黑白"navigationStyle":"custom"//自定义需要配置的内容},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

2.因为要适配各种手机配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

//获取顶部栏信息({success:res={//导航高度},fail(err){(err);}})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

3.在globalData也配置信息文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

globalData:{userInfo:null,navHeight:0}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

4.完整配置dome文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

App({onLaunch:function(){//获取顶部栏信息({success:res={//导航高度},fail(err){(err);}})},globalData:{userInfo:null,navHeight:0}})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

/*自定义顶部栏高度*/.nav{width:100%;overflow:hidden;position:relative;top:0;left:0;z-index:10;}.nav-title{width:100%;height:45px;line-height:45px;text-align:center;position:absolute;bottom:0;left:0;z-index:10;font-family:PingFang-SC-Medium;font-size:36rpx;letter-spacing:2px;}.{width:22px;height:22px;position:absolute;bottom:0;left:0;padding:10px15px;}.bg-white{background-color:#FFCE58;}.bg-gray{background-color:#f7f7f7;}.overflow{overflow:auto;}.hidden{overflow:hidden;}.INinputheader{width:60%;height:30px;background:rgba(255,255,255,1);border-radius:30px;font-size:14px;margin-top:7px;position:relative;float:left;margin-left:12px;}.INsearchicon{position:absolute;left:12px;}.weui-input{height:30px;line-height:30px;text-align:left;padding-left:30px;letter-spacing:0px;}.INtab{text-align:left;margin-left:12px;color:#fff;}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

6.现在配置完开始使用页面引用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

view!--自定义头部--viewclass='navbg-white'style='height:{{navH}}px'viewclass='nav-title'viewclass="INinputheader"iconclass="INsearchicon"type="search"size="12"/inputclass="weui-input"placeholder="搜索学习内容"//view/view/viewscroll-viewclass='bg-grayoverflow'style='height:calc(100vh-{{navH}}px)'scroll-yviewclass='hidden'!--正文--view当前位置信息:/view/view/scroll-view/view文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

7.index.js页面引用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

constApp=getApp();//设立顶部栏高度Page({data:{},onLoad:function(options){//自定义头部方法({navH:});}})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19289.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/19289.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定