微信小程序tab导航+滚动顶部吸附效果（开发实例）

具体思路如下，我们首先要拿到需要吸附元素的据顶部距离，然后再去判断，如果超过了，我们通过判断添加样式即可，如在有不理解的，可以私信小编。

<view style="height:100%;position:fixed;width:100%;"><scroll-view scroll-y="false"  bindscroll="scroll" style="height:100%;"><view class="page-bottom-content"><text>{{text}}</text></view><view class="page-banner">banner</view><view class="page-group {{scrollTop > 360 ? 'page-group-position' : ''}}"><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><view class="goods-list">goods-list</view></scroll-view>
</view>

Page({data: {scrollTop: null},//滚动条监听scroll: function (e) {this.setData({ scrollTop: e.detail.scrollTop })},
})

.page-banner{height: 500rpx;background-color: greenyellow;padding: 20rpx;color:#fff;}
.page-group{display: table;background-color: blueviolet;width: 100%;table-layout: fixed;position: relative;top: 0;left: 0;
}
.page-group-position{position: fixed;
}
.page-nav-list{padding:30rpx 0 ;display: table-cell;text-align: center;color: #fff;
}
.goods-list{height: 2000rpx;background-color: green;padding: 20rpx;color:#fff;
}

喜欢上方小程序,需要源码的,添加博主微信私信小编.

微信小程序tab导航+滚动顶部吸附效果（开发实例）相关推荐

微信小程序 — 实现上下滚动的广告效果
实现方式使用swiper,设置方向为纵向 virtical <swiper vertical="true" style="margin-top: 40rpx;&qu ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序底部导航---tabBar
微信小程序底部导航-tabBar 示例图如下: 在app,json页面pages配置中代码如下: "pages": ["pages/home/home",&q ...

微信小程序tab导航+滚动顶部吸附效果（开发实例）

微信小程序tab导航+滚动顶部吸附效果（开发实例）相关推荐

最新文章

热门文章