工作笔记：小程序中，标题固定到顶部在iphone手机中滑到底部出现闪烁的问题

需求：页面往上滚动，当红框内容位置滚动到页面顶部时，固定到顶部；反过来，页面往下滚动，当页面滚动高度小于红框内容距离顶部正常高度时（未固定到顶部），则脱离顶部固定。

实现：

//js
onPageScroll: function (e) {if(e.scrollTop >= this.data.tabScrollTop + 10){this.setData({tabFixed: true})} else {this.setData({tabFixed: false})}}//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}"><view class="title"><text>动 态</text><text>订 单</text></view><view class="hidden-box"></view>
</view>//wxss
.tab-info > .title {display: flex;justify-content: space-around;height: 86rpx;padding: 0 84rpx;border-bottom: 2rpx solid #e6e6e6;background-color: #fff;
}
.tab-info.fixed > .title{position: fixed;left: 0;right: 0;top: 0;z-index: 9;
}.tab-info .hidden-box{height: 0;
}
.tab-info.fixed .hidden-box{height: 88rpx;
}
或者
.tab-info .hidden-box{height: 88rpx;display: none;
}
.tab-info.fixed .hidden-box{display: block;
}

或者

//js
onPageScroll: function (e) {if(e.scrollTop >= this.data.tabScrollTop + 10){this.setData({tabFixed: true})} else {this.setData({tabFixed: false})}}//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}"><view class="title"><text>动 态</text><text>订 单</text></view>
</view>
<view class="content {{tabFixed ? 'marT88':''}}"></view>//wxss
.tab-info > .title {display: flex;justify-content: space-around;height: 86rpx;padding: 0 84rpx;border-bottom: 2rpx solid #e6e6e6;background-color: #fff;
}
.tab-info.fixed > .title{position: fixed;left: 0;right: 0;top: 0;z-index: 9;
}.content.marT88{margin-top: 88rpx;
}
或者
.content.marT88{padding-top: 88rpx;
}

结果：当title内容部分高度 + content内容部分高度接近屏幕本身高度时，在安卓手机上没有问题，可以完美实现。但是，在iphone手机上会出现闪烁问题。

原因：iphone手机浏览器滚动到底部/顶部时，有一个默认的动画效果。再加上，固定顶部会引起页面的回流。

解决：页面一进入，就把title部分直接脱离文档流，这样就不会因为固定顶部而使得页面的回流问题。这个，在页面性能优化上很重要。如果后期因为用户行为要对某个元素进行动画或脱离文档流的操作，那么，在页面第一次渲染时就尽量让其脱离文档流。这样，后期的用户行为就不会引起页面的回流现象，从而影响页面的显示，而导致性能上和体验上的问题。

//js
onPageScroll: function (e) {if(e.scrollTop >= this.data.tabScrollTop + 10){this.setData({tabFixed: true})} else {this.setData({tabFixed: false})}}//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}"><view class="title"><text>动 态</text><text>订 单</text></view><view class="hidden-box"></view>
</view>//wxss
.tab-info > .title {display: flex;justify-content: space-around;position: absolute;left: 0;right: 0;top: 0;z-index: 9;height: 86rpx;padding: 0 84rpx;border-bottom: 2rpx solid #e6e6e6;background-color: #fff;
}
.tab-info.fixed > .title{position: fixed;
}
.tab-info .hidden-box{height: 88rpx;
}

工作笔记：小程序中，标题固定到顶部在iphone手机中滑到底部出现闪烁的问题相关推荐

小程序-输入关键字搜索，关键字在搜索列表中高亮效果
这里写自定义目录标题小程序-输入关键字搜索,关键字在搜索列表中高亮效果小程序-输入关键字搜索,关键字在搜索列表中高亮效果第一步:按照网上大神写的思路,在截取首位关键字空格方法出现找不到repl ...
ready等方法微信小程序_微信小程序设置图片固定比例
小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序设置图片固定比例 . 12月28日消息,微信官方日前发布消息称,为了让微信小程序相关成员在无线端更方便地管理微信小程序,将开发小程 ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
微信小程序例子——修改小程序的标题
步骤说明: 打开[微信开发者工具],新建一个项目,工具会自动显示一个Hello World小程序,小程序默认标题为:WeChat: 点击[编辑]进入代码编辑界面: 点击[app.json]文件,将&q ...
微信小程序图片高度固定,width:auto,图片不展示
微信小程序图片高度固定,width:auto,图片不展示解决办法 image标签设置width:auto 设置mode属性mode=heightFix 高度固定,宽度不固定小程序版本 2.10.3 ...
android小程序内核,小程序的运行环境：iOS（iPhone/iPad）、Android
微信小程序运行在三端:iOS(iPhone/iPad).Android 和用于调试的开发者工具. 三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的: 在 iOS 上,小程序逻辑层的 jav ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
微信小程序调用地图和跟据经纬度打开手机地图导航
微信小程序调用地图和跟据经纬度打开手机地图导航第一步:输入地址位置 wxml<button bindtap="onChooseLocation">打开地图</b ...
租赁小程序源码芝麻免押租机平台手机租赁代运营
租赁小程序手机租赁小程序代运营租赁免押租代运营上征信银行风控芝麻免押支付宝服务商支付宝租赁服务商租赁平台源码租赁小程序源码租机平台源码手机租赁源码租赁小程序源码芝麻免押 ...

工作笔记：小程序中，标题固定到顶部在iphone手机中滑到底部出现闪烁的问题

工作笔记：小程序中，标题固定到顶部在iphone手机中滑到底部出现闪烁的问题相关推荐

最新文章

热门文章