标签：background 自定义 微信 topOpacity globalData tabbar app 255

做为自己的一个小笔记，以免后面再用到

 

 

1，在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom" ，隐藏系统导航栏

{ "navigationBarTitleText": "", "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "white", "backgroundTextStyle": "dark", "usingComponents": { }, "navigationStyle": "custom" }   2，创建components 文件，为了方便复用 js 文件内容： const app = getApp() Component({ properties: { defaultData: { type: Object, value: { title: "默认标题" }, observer: function (newVal, oldVal) {} }, topOpacity: { type: Number, value: { topOpacity: 0, } } }, data: { navBarHeight: app.globalData.navBarHeight, menuRight: app.globalData.menuRight, menuTop: app.globalData.menuTop, menuHeight: app.globalData.menuHeight, }, attached: function () { }, methods: { } })     wxml文件内容： <!-- 自定义顶部栏 --> <view class="nav-bar" style="height:{{navBarHeight}}px;"> <view class="nav-barback" style="height:{{navBarHeight}}px;opacity:{{topOpacity}}"></view> <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;"></input> </view> <!-- 占位，高度与顶部栏一样 --> <view style="height:{{navBarHeight}}px;"></view>   wxss文件内容： .nav-bar { position: fixed; width: 100%; top: 0; color: rgb(255, 255, 255); /* background: rgb(255, 255, 255); */ z-index: 10000; } .nav-barback{ background-color: #FFD52F; width: 100%; position: relative; top: 0; z-index: 10001; } .nav-bar .search { width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: rgb(255, 255, 255); padding-left: 14px; z-index: 10002; }         在需要使用的界面使用方法 1，在json中引入该components， 2，wxml中 <navigationBar default-data="{{defaultData}}" topOpacity="{{topOpacityFloat}}"></navigationBar> 3，js中，这个标题看需求后面可以替换搜索栏 defaultData: { 　　title: "我的主页", // 导航栏标题 }, 4，该方法是监听当前界面滚动的回调，上滑时，自定义的背景色透明度会从0一直到1，达成渐变效果 onPageScroll(t){ let topOpacity = t.scrollTop / 100 console.log('topOpacity',t.scrollTop,topOpacity); if (t.scrollTop < 10) { topOpacity = 0 } else if (topOpacity >= 1) { topOpacity = 1 } this.setData({ topOpacityFloat: topOpacity }) },   仅作为个人随笔或有使用到的朋友做为小参考

标签：background,自定义,微信,topOpacity,globalData,tabbar,app,255
来源： https://www.cnblogs.com/FZP5/p/16691862.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。