小程序 WXS响应事件（滚动菜单栏tab吸顶）

解决问题：
小程序页面滚动，tab触顶吸顶

解决办法：
1）页面滚动事件中监听处理（不推荐）
缺点：在安卓端性能非常差，吸顶效果反应迟钝，不流畅等问题。

2）WXS响应事件（推荐）

index.WXML
<wxs module="test" src="./test.wxs"></wxs> // 引入wxs// 页面滚动组件
<scroll-viewbindscroll="{{test.funcA}}"data-top-height="{{530}}" style='height:100%;'scroll-yscroll-with-animation="true"><view class="page-group-interaction page-group"><view class="page-nav-list"><text>首页</text></view><view class="page-nav-list"><text>活动</text></view><view class="page-nav-list"><text>菜单</text></view><view class="page-nav-list"><text>我的</text></view></view>
</scroll-view>
<!-- scroll-view滚动组件
bindscroll 监听滚动事件 （必须）
bindscrolltolower 滚动到顶部/左边时触发
bindscrolltoupper 滚动到底部/右边时触发
data-top-height 传值 （必须）
style='height:100%;'（必须，必须写上100%高度，不然触发不了滚动事件）-->

index.wxs
var funcA = function (e, ins) {var scrollTop = e.detail.scrollTop; // 滚动条距离页面顶部的距离var topHeight = e.currentTarget.dataset.topHeight; // 接收传值，tab距离页面顶部的距离if (scrollTop > topHeight ) {ins.selectComponent('.page-group').setStyle({// 吸顶"background-color": 'c'}).addClass('page-group-fixed')} else {ins.selectComponent('.page-group').setStyle({"background-color": 'rgba(00, 00, 00, ' + Math.max(0, (scrollTop) / 100) + ')'}).removeClass('page-group-position')}
}
module.exports = {funcA: funcA
}

.page-group-fixed{position: fixed;top: 0;left: 0;z-index: 1000;box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(196, 196, 196, 0.1);
}

注意：
1）页面使用scroll-view滚动代替页面滚动之后，上拉下拉加载之类的都要用scroll-view的事件来处理

2）滚动视图组件设置了style ='height：100％;'属性，必须写上100%高度，不然触发不了滚动视图组件滚动事件

3）查看小程序 scroll-view官方文档

小程序 WXS响应事件（滚动菜单栏tab吸顶）相关推荐

小程序 WXS响应事件（超出两屏显示返回顶部按钮）
小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...
关于小程序的bindscrolltolower事件失效，已解决
公司最近在开发一款小程序,我也是刚上手,坑挺多的,特意来记录一下. 关于微信小程序的bindscrolltolower事件失效,我贴一下第一次写的代码. 这样使用bindscrolltolower 事 ...
Uniapp-微信小程序实现全局事件监听并进行数据埋点
Uniapp-微信小程序实现全局事件监听并进行数据埋点零.前言最近接到需求,领导希望使用微信开放平台上免费的We分析进行数据埋点,但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改,笔 ...
微信小程序开发（五）：小程序中的事件
在往常的web开发中,"事件"是常用的知识,但是在微信小程序中使用"事件"有很大不同. 一个点击事件的例子使用bind在WXML组件中绑定事件,使用data- ...
微信小程序-炫酷手持滚动弹幕生成小工具
微信小程序-炫酷手持滚动弹幕生成小工具欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
微信小程序 -- 通知消息横向滚动 -- 无缝连接1
微信小程序 – 通知消息横向滚动 – 无缝连接1 wxml <view class="notice"><view class="left"&g ...
[微信小程序]微信小程序点击事件返回值的target分析
微信小程序点击事件返回值的target分析测试过程在微信小程序中创建以下图片然后在调试中点击下面第5个. console返回两个e 第一个e是第5块小块的e 第二个e是下面全部9小块组成的大块的 ...
vue、uniapp 小程序点击事件禁止多次点击方法封装
vue.uniapp 小程序点击事件禁止多次点击方法封装在写uniapp 小程序时发现个bug,疯狂点击按钮第一点击事件还没执行完就疯狂多次调用该事件,很是影响用户体验以及消耗性能,所以这里我封装个 ...

小程序 WXS响应事件（滚动菜单栏tab吸顶）

小程序 WXS响应事件（滚动菜单栏tab吸顶）

小程序 WXS响应事件（滚动菜单栏tab吸顶）相关推荐

最新文章

热门文章