.search_border{
width: 85%;
height: 80rpx;
border-radius: 25rpx;
display: flex;
align-items: center;
background: rgb(220, 221, 218);
.top_serach{
width: 100%;
margin-top: 10rpx;
display: flex;
flex-direction: row;
.input{
width: 600rpx;
margin-left: 20rpx;
.search_icon{
margin-left: 30rpx;
width: 60rpx;
height: 60rpx;
.top_Navigation{
width: 100%;
height: 100rpx;
background: cadetblue;
display: flex;
flex-direction: row;
justify-content: space-around;
.Nav_tiems{
width: 25%;
height: 100rpx;
background: cornflowerblue;
.Nav_text{
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
.Create_image{
width: 75rpx;
height: 75rpx;
display: flex;
align-items: center;
margin-left: 20rpx;
.topnavFixed{
border-top-left-radius:20rpx;
border-top-right-radius:20rpx;
position:fixed;width:100%;height:100rpx; top:0rpx;background:white;z-index: 1;
.topnavAbsolute{
border-top-left-radius:20rpx;
border-top-right-radius:20rpx;
position:absolute;width:100%;height:100rpx; top:340rpx//top值会影响组件到屏幕顶端的距离,以及影响下拉时造成的闪动 适当调小后可以解决闪动问题 ;background:white;z-index: 1;
Page({
data: {
Navigation:[
"提出问题",
"解答问题",
"吸收经验"
onPageScroll: function (e) {
this.setData({
scrollTop: e.scrollTop
本文章收录于我的小程序目录中,点击我的主页即可看见我的小程序目录,里面还有更多有关小程序的内容且不断更新!可以的话点个赞吧!
本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;🍅。
<!--导航条-->
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}...
2.当某个页不需要头部样式,需要覆盖全屏只留下返回胶囊时,可以在指定page页下的json文件内添加"navigationStyle": "custom"3.当不使用官方的标题栏时,你也可以设计自己的头部栏,下面是我自己的,效果为logo图靠左居中(靠左是考虑到部分手机的灵动岛遮挡),大家可以自己更改细节。1.在各个页添加头部固定样式,可以在app.json内设置。navigationBarTitleText:标题名称。navigationStyle:导航栏样式。
在使用HbuilderX开发微信小程序时(在HbuilderX中写代码,在微信开发者工具编译),由于微信小程序自带的导航栏功能少,样式单一等,于是采用colorUI自定义导航栏实现需求。而问题就一而再再而三的出现了:
自定义导航栏导致系统自带的下拉刷新不能用(官方回应这是微信小程序的bug)
采用HbuilderX自带的scroll-view组件的下拉刷新
但scroll-view在微信小程序却出现了:
无限刷新问题
微信小程序实现自定义导航栏,可滑动导航栏和非滑动导航栏欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
欢迎使用Markdown编辑器
你好! 这是你第一次使用 Markdown编辑器 所展示的
二、代码:
wxml:
<scroll-view class="tab stickyClass" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">
<block wx:for="{{menuList}}" wx:ke...