微信小程序带吸顶效果的导航栏

有时候做微信小程序商城的时候要做可以左右滑动又有吸顶效果的导航栏，最近刚做过一个，不多说直接上代码。
.wxml

<view class="limit_save fix-save" wx:if="{{fixTop<scrollTop}}"><view class='save_choose'><scroll-view class="scroll-view_H" scroll-x="true" scroll-left="{{navScrollLef}}" scroll-with-animation="{{false}}"><block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"><view class="nav-name {{currentTab == idx ?'active':''}}" data-current="{{idx}}" data-gtype="{{navItem.orderNum}}" bindtap="switchNav">{{navItem.name}}</view></block></scroll-view></view></view>
<view class="limit_save staic-save" wx:else=""><view class='save_choose'><scroll-view class="scroll-view_H" scroll-x="true" scroll-left="{{navScrollLeft}}"><block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"><view class="nav-name {{currentTab == idx ?'active':''}}" data-current="{{idx}}" data-gtype="{{navItem.orderNum}}" bindtap="switchNav">{{navItem.name}}</view></block></scroll-view></view></view>

.js

data{fixTop: 760, //区域离顶部的高度scrollTop: 0, //滑动条离顶部的距离
}
// 获取滚动条当前位置onPageScroll: function (e) {let self = this;let top = e.scrollTop;if (e.scrollTop > 100) {this.setData({floorstatus: true});} else {this.setData({floorstatus: false});

第一次写，有错误的地方请指正。

微信小程序带吸顶效果的导航栏相关推荐

微信小程序开发笔记二—底部导航栏tabar
文章目录一.实现效果二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件三.注意事项一.实现效果首先展示一下实现效果底部导航栏有三个按键 ...
【微信小程序】学习笔记-----navigation-bar导航栏
微信官方文档----小程序微信小程序底部的导航栏不需要自己画,通过配置即可先配置list数组,tab的列表在app.json中与其他项平级,当输入tabBar的时候会自动填补齐全,这里要注意,控 ...
微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar {"navigationBarTitleText&q ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
【微信小程序】幻灯片效果实现
[微信小程序]幻灯片效果实现 <view style="height: {{276-headHeight}}px;" class="bgIndex"> ...
微信小程序之网易云音乐导航
微信小程序之网易云音乐导航微信小程序之网易云音乐(一)- uni-app的基本使用微信小程序之网易云音乐(二)- uni-app标签的使用微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
微信小程序的动画效果@keyframes
微信小程序的动画效果@keyframes 定义动画的格式: @keyframes 动画名称{ 阶段1{css样式} 阶段2{css样式} 阶段3{css样式} } 每个阶段用百分比表示,即从0%到1 ...

微信小程序带吸顶效果的导航栏

微信小程序带吸顶效果的导航栏相关推荐

最新文章

热门文章