微信小程序,导航链在向上滑动是被隐藏到轮播图下面之后,整个页面才也正常向上滚动隐藏。

![图片说明](https://img-ask.csdn.net/upload/201709/29/1506652748_769611.png)图片说明![图片说明](https://img-ask.csdn.net/upload/201709/29/1506652760_505825.png)

0

5个回答

图片说明

0

图片说明

0

样式表和 实际效果图都已上传。麻烦各位帮我看看。万分感谢!!!

0

看一下.weui-tab_panel的样式

0

.weui-tab__panel {
height:100%;
padding-top:50px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
这个公共样式

padding-top:0;

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
小程序滑动临界值固定隐藏显示导航栏
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐...
实现向上滚动隐藏导航栏,向下滚动显示导航栏
效果图 2.gif 代码实现 @interface ViewController ()<UIScrollViewDelegate> @property (nonatomic,strong) UIScrollView* scrollView; @end @implementation ViewController - (voi...
原生JS实现向下滚动导航栏自动固定在顶部,向上滚动到顶部又恢复效果
前言 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的...
鼠标滚轮向上出现header导航,滚轮向下隐藏header
找了个简单的实现,之前是看yahoo这么做的,觉得很不错,用户体验好一点 var agent = navigator.userAgent; if (/.*Firefox.*/.test(agent)) { document.addEventListener("DOMMouseScroll", function(e) { e = e ||
IOS开发 - UIScrollView如何实现向上滚动让某个控件逐渐消失or导航条消失
下面我们来看一下UIScrollView当向上滑动式如何让它上面的某个控件逐渐消失我们先来看一下效果图其实实现这个功能很简单 , 我们只需要使用UIScrollView的代理方法就可以让我们的类遵守<UIScrollViewDelegate> ,然后复制如下一段代码:- (void)scrollViewDidScroll:(UIScrollView*)scrollView{    CG...
Android CoordinatorLayout + AppBarLayout+ToolBar(向上滚动隐藏指定的View)
实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚动RecylerView,Tab恢复出现.这么做的好处在于,用户能有更多的空间位置去看列表里面的内容.
小程序swiper-item中banner有一部分被隐藏
可以直接给swiper组件添加高度 <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" style="height:320rpx"> <block wx:for="{{banner}}"> <swiper
【微信小程序】 隐藏小程序 导航栏/TabBar
1、页面不存在于app.json中的 tabBar.list 2、使用wx.navigateTo 跳转到新页面 3、 微信基础库1.9.0开始支持api wx.hideTabBar/wx.showTabBar wx.hideTabBar({ animation:true //是否需要过渡动画 }) wx.showTabBar({ animation:true //是否需要...
向下滚动时隐藏header,向上显示
原文链接:https://segmentfault.com/q/1010000007252642/a-1020000007253263 //设置下css,加个绿色的背景,明显 $('.sf-header').css({ background : '#CFC', width: '100%' }); // $(document).scroll...
微信小程序之底部导航栏——tabBar
微信的开发文档里有,很多人也写了,自己写一遍,加深印象罢! 在学习Android的时候,被模仿一个app的界面,实现其UI。而一般来说,总是避免不了导航栏的。 比较大众化的,就是底部导航栏啦,而实现的方式也是非常的多,如:Fragment+ViewPage Or 来一个RadioGroup Or 以前的TabHost 等~ 效果,是一样或差不多的,而实现手法,是五花八门特色鲜明的! 在
微信小程序隐藏标题栏navigationBar的方法
未隐藏前: 在app.json里面window选项里面设置一下: 最终显示效果: 这样就没有了标题栏
新版微信页面底部导航问题
在移动端开发微信页面的过程中,出现这样一个问题 自己定好的底部导航栏下面会多出一行微信自带的底部返回栏,影响我们原型的体验,就需要对此做出优化; 首先明确问题所在 通过查询发现底部返回栏的机制是:页面出现跳转的时候会出现、页面向下滚动时会做隐藏; 解决问题 1. 针对上面的机制,对应两种办法去隐藏底部返回栏: 使用原生JS(已知是跳转出现,那我们就对跳转进行拦截,让...
ListView/ScrollView的header或footer,当向下滚动时消失,向上滚动时出现
QuickReturnHeader ListView/ScrollView的header或footer,当向下滚动时消失,向上滚动时出现
微信小程序点击实现隐藏和点击实现显示
组件显示的方法:即是定义组件的表现形式 display: none;wxml文件: <view > <button class="hide{{showView?'show':''}}" bindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button> //?:即表示了一种选择关系 <button class="hide{{showV
微信小程序之文字向上滚动效果
根据项目需要,实现文字上下滚动的广告效果,其在pc端和手机上也比较常见这种效果,但在小程序里如何实现呢? 经过一番研究发现,可以使用微信小程序的swiper滑块视图容器组件实现这种效果。效果图如下: 设置swiper组件vertical的属性为true,即可实现文字上下滚动的效果。 示例代码已上传到GitHub上,地址:wx...
仿知乎主页,上滑隐藏NavigationBar,下滑显示
最近在仿作知乎客户端,知乎首页的 navigationBar 会随着下方的 tableView 滑动而改变,上滑隐藏,下拉显示,并且下拉需要一定速度才会触发显示。在网上查了一下,看到一个随 TableView 滑动改变 NavigationBar 透明度的demo,虽然和自己的需求不一样,但提供了利用 KVO 实现的思路,有了思路就着手做了,调试了几次和知乎官方实现效果稍有不同,但基本需求实现了,
微信小程序-点击按钮内容显示和隐藏,并且文字改变
wxml: &amp;lt;!--按钮--&amp;gt; &amp;lt;view class=&quot;more&quot; bindtap=&quot;showedit&quot;&amp;gt;{{editText}}&amp;lt;/view&amp;gt; &amp;lt;!--内容--&amp;gt; &amp;lt;view class=&quot;delete {{editTrue?'isRuleShow':'isRuleHide'}}&quot;&amp;gt; &amp
FloatingActionButton向下滑动隐藏向上滑动显示
beauty_recycle.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, d...
【微信小程序】小程序动态显示和隐藏某个控件
在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。 因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jquery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。 实现方法: logs.wxml {{showView?'Click To Check
web-view组件的可行性使用以及小程序的导航栏设置
1.近日随着小程序游戏”跳一跳”横空出世,微信小程序火爆一时。随之而来的是各类APP/服务号/网页的翻版小程序,开始入驻人们的日常生活中。那么微信小程序到底有什么不同之处呢,本文将针对前端工作者的可行性利弊来说。 2.首先微信小程序除了文件命名不同于html/css外,以及view标签的使用,还有数值编程不同,大体来说前端还是能够hold的住的 3.在微信小程序里面可以设置app.json数据
iOS开发上下滑动UIScrollview隐藏或者显示导航栏
一、好多App都有上下滑动UIScrollview隐藏或者显示导航栏,在这里我说说我觉得有用的几种方法: 1.iOS8之后系统有一个属性hidesBarsOnSwipe  Objective-C代码如下 self.navigationController.hidesBarsOnSwipe = YES;  swift代码如下 self.navigationController?.hides
微信小程序的加载状态添加和隐藏
使用下面代码添加 wx.showToast({ title:'加载中', icon:'loading', mask:true }) 然后我们调用下面方法进行隐藏loading状态 wx.hideToast(); 这个主要用于加载数据,或者加载页面时候的显示,表明状态 ...
小程序点击轮播图跳转到tab导航界面
需求:小程序点击轮播图跳转到tab导航界面,效果如下所示 点击轮播图的图片,跳转到我的界面上 先实现以下的代码,在以下的基础上,开始实现需求 微信小程序底部导航栏 https://www.jianshu.com/p/89a63dc99839 微信小程序轮播图 https://www.jianshu.com/p/bc3261557031 ...
微信小程序web-view使用整理
2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...
隐藏微信底部导航栏
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {WeixinJSBridge.call('hideToolbar');});
微信小程序:<view>视图的切换显示\隐藏详解(假的两个页面,实际上是通过事件点击进行<view>视图的隐藏和显示的切换)
假的两个页面,实际上是通过事件点击进行&amp;lt;view&amp;gt;视图的隐藏和显示的切换,不是两个WXML之间进行切换而是同一个WXML中有很多个不同的&amp;lt;view&amp;gt;, 比如同一个页面中有&quot;关注&quot;和&quot;发现&quot;,   点击&quot;关注&quot;时 ,   &quot;关注&quot;页面显示,   &quot;发现&quot;的页面隐藏,;  点击&quot;发现&quot;时 , &quot;关注&quot;的页面隐藏.  
微信小程序 —— 动态决定页面元素显示或隐藏的技巧
在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法1.先在元素的class中 class=’{{show?’true’:’hidden’}}’ 2.再在相对应的js中配置show的值,例 data: {show:1,} 3.最后在相对应的css中定义 .hidden{display:none;}简单办法 直接在元素
微信小程序之显示隐藏
wxml文件 &amp;amp;lt;view class='head_span' wx:if=&amp;quot;{{head_span}}&amp;quot; bindtap='search_cancel'&amp;amp;gt; &amp;amp;lt;span&amp;amp;gt;取消&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;/view&amp;amp;gt;
解决页面加载轮播图下面的内容抖动问题
页面开始加载时,如果网络慢,图片加载会很慢,这是它盒子的高度并没有所以下面的内容会上移,当你的图片加载出来以后,刚刚的内容会下移从而出现抖动问题解决:给图片的盒子加一个初始值,当图片加载出来时,超出部分再隐藏    overflow: hidden    width: 100%    height: 0    padding-bottom: 30% (图片的高度大概)...
微信小程序,隐藏滚动条
scroll,view元素在ios和有些手机上会出现滚动条的问题。 scroll-view 可滚动视图区域。   解决方法:把下面这段代码放到app.wxss里面去。可以让所有页面应用这段css /*隐藏滚动条*/ ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; }...
微信小程序隐藏右侧滚动条
微信小程序隐藏右侧滚动条 当页面元素列表过多的时候,右侧会默认出现一个很难看的滚动条,这个时候就需要写代码将这个滚动条隐藏起来了。 其实方法很简单;只需要在wxss里面添加这样的一段代码即可 ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } 原文作者:祈澈姑娘;技术博客:https://www.ji...
微信小程序页面上下滚动
开发交流QQ群:173683895 173683895 526474645 人满的请加其它群 看图 源码 &lt;view class="container container-fill"&gt; &lt;view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrol...
微信小程序swiper轮播图面板指示点不显示或位置不对
最近在搞小程序,做到轮播图时,轮播图中的小圆点位置一直在swiper标签的下方,不在图的上面,或是小圆点根本不显示(就是找不到),设置了indicatorDots: true属性,小圆点还是找不到,后来才发现一个很重要的事情,犯的低级的错误! 那就是:swiper标签里面忘记加 indicator-dots=&quot;{{indicatorDots}}&quot; 这个属性了,囧,无语! indicator-dot...
小程序防止点击遮罩层遮罩层下面也反应
&amp;lt;view class='selector-bj' wx:if=&quot;{{selectorBj}}&quot; bindtap='tapSeleBj' catchtouchmove=&quot;preventD&quot;&amp;gt;&amp;lt;/view&amp;gt; 这是遮罩层   在其中加上catchtouchmove=&quot;preventD&quot; 为防止冒泡事件,就可以了。       最后分享一个公众号二维码,写一些散文和...
微信小程序中隐藏右上角转发选项,实现在页面内点击转发按钮转发
最近开发小程序遇到了一个需求,在页面内定义一个转发按钮,只能在页面内点击这个转发按钮才能触发转发,右上角转发隐藏掉。 实现效果: 页面内部转发按钮: 实现方法: 微信小程序官方文档中提到,使用wx.hideShareMenu();方法隐藏转发按钮;...
小程序Canvas隐藏问题处理
一、目前版本小程序框架 当前问题参考处理建议使用这种方式:https://my.oschina.net/tianma3798/blog/2051575 canvas使用方面还有些不足地方。 比如:canvas 的直接隐藏目前不可用 display:none 只要使用上线文draw绘制就会显示在页面最上层,遮盖其他内容。 当前问题解决方案1: 在page的直接子节点添加一层view,将v...
微信小程序去除左上角返回的按钮
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 解决方法有两种; 1.把该页面设置为tab页面或者主页; 2.进入该页面使用wx.reLaunch(); 示例 wx.reLaunch({ url: '../detail/detail', }) 这样有一个弊端,就是会销毁其它所有的页面。 ...
求解,微信小程序,导航链在向上滑动时,会先被隐藏到轮播图下面,之后整个页面才会正常向上隐藏。
如题,求解。我直接上图和源代码。rn[img=https://img-bbs.csdn.net/upload/201709/29/1506652930_217884.png][/img]rn[img=http://img.bbs.csd[img=https://img-bbs.csdn.net/upload/201709/29/1506653132_343447.png]rn[/img].net/upload/201709/29/1506652952_153230.png][/img]
onPageScroll微信小程序底部悬浮框滑到底部隐藏,其他情况显示
onPageScroll 利用onpageScroll监测屏幕的位置 优点 1.有点操作简单粗暴。 缺点 2.缺点固定值不能确定的时候会有偏差。需要借助另一个 功能组件SelectorQuery 使用方法 onPageScroll:function(res){ console.log(res) if (res.scrollTop &lt; 600){ t...
微信小程序-横向滑动scroll-view隐藏滚动条
微信小程序-横向滑动scroll-view隐藏滚动条