小程序吸顶tab 滚动监听

思路
position sticky
配合滚动监听
锚点跳转
自定义tab

<bg-navigation-bar showBack="{{true}}"bgurl="creditupbg.png"bind:closepage="goback"title="积分中心" /><view class="bg"><view class='mycredit'><view class='creditleft'><view class="my-header-content-avatars"><image class="my-header-content-avatars-img" mode="widthFix"bind:tap="myprofile"src="{{userInfo.avatar||defaultAvatar}}"></image></view><view class='credit-num'><view class='upcredit'bind:tap='mycreditdetail'><image class='golden-icon'src="credit/tinygolden.png"></image><view class="score">{{myIntegral.usableIntegral}}</view></view><view class='mycreditnum'bind:tap='myexchange'><view class="hint">我的兑换</view><i-icon name="sright"size="17"color="#FFFFFF "class="icon-sright"></i-icon></view></view></view><view bind:tap='gotorule'class='creditright'>规则</view></view><!--   class="quickguide" --><viewstyle="position:sticky;position: -webkit-sticky;top:{{tabberHeight}}px;background:#FE7762;display:flex;width:750rpx;align-items: center;justify-content: center;z-index:20;"><view class="tab"><yt-tab bind:handleClick="tabClick"wx:if="{{tabsReal.length>0}}"placeholdersliderWidth="{{40}}"tabDefaultTextColor="#333333"tabActiveTextColor="#333333"leftstab="{{false}}"tabFontSize="28"tabIndex="{{tabIndex}}"tabs="{{tabsReal}}"tabunderlineColor="#FF7440" /></view></view><view class="calendar"id="calendar"></view><view class="subject-box"id="taskcredit"wx:if="{{taskList.length>0}}"><view class="subject-card"><view class="subject-hint">做任务赚积分</view><view class="subject-item"data-item="{{item}}"wx:for="{{taskList}}"wx:key="{{index}}"><view class="subject-left"><image wx:if="{{item.taskMatterCode==='shareApplet'}}"class='taskicon'src="credit/sharemini.png"></image><image wx:if="{{item.taskMatterCode==='wrongQuestion'}}"class='taskicon'src="/errornotebook.png"></image><image wx:if="{{item.taskMatterCode==='brushQuestion'}}"class='taskicon'src="credit/feedback.png"></image><image wx:if="{{item.taskMatterCode==='favoriteAnyTopic'}}"class='taskicon'src="credit/collectstar.png"></image><image wx:if="{{item.taskMatterCode==='shareReport'}}"class='taskicon'src="/feedback.png"></image><view class="task-info"><view class="subject-time">{{item.taskContent}}</view><view class="subject-score"><image class='goldenicon'src="credit/tinygolden.png"></image><view class="hint">{{'+'+item.receivedQuantity}}</view></view></view></view><view bind:tap="reserve"class="{{item.buttonStatus==='GO_FINISH'?'subject-right':'subject-right-no'}}"data-item="{{item}}">{{item.buttonStatus==='GO_FINISH'?item.buttonName:'已完成'}}</view></view></view></view><view class="credit-hint"wx:if="{{creditList.length>0}}"id="exchangecredit"><text class="left-hint">积分兑换</text><!-- <view class="right-hint"><text class="hint">我的兑换</text><i-icon bind:tap="myexchange"data-item="{{item}}"name="sright"size="24"color="#a9a9a9"class="arrow"></i-icon></view> --></view><view class="credit-box"wx:if="{{creditList.length>0}}"><view class="credit-item"data-item="{{item}}"bind:tap="productDetail"wx:for="{{creditList}}"wx:key="{{index}}"><view class='item-product'><view class='product-img'><image class='img-large'src='{{item.goodsImage}}'></image><text class='hot-icon'wx:if="{{item.goodsMark}}">{{item.goodsMark}}</text></view><view class="product-info"><view class='prodct-name'>{{item.goodsName}}</view><view class='prodct-price'><view class='originprice'>{{item.integralAmount}}</view><view class='unit'>积分</view><view class='discountprice'wx:if="{{item.goodsPrice}}">{{'¥'+item.goodsPrice}}</view></view><view class='credit-num' wx:if="{{(item.virtualSoldInventory!==null&&item.virtualSoldInventory!==''&&item.virtualSoldInventory!==undefined)||(item.soldInventory!==null&&item.soldInventory!==''&&item.soldInventory!==undefined)}}">{{'已兑'+tool.productNumber(item.soldInventory,item.virtualSoldInventory)}}</view></view></view></view></view></view>tabClick(e){var that = this;that.data.flagclick = trueclearTimeout(that.data.timemachine)if(this.data.tabsReal[e.detail.index].label==='签到赢积分'){this.gotoid('#calendar')}if(this.data.tabsReal[e.detail.index].label==='做任务赚积分'){this.gotoid('#taskcredit')}if(this.data.tabsReal[e.detail.index].label==='积分兑换'){this.gotoid('#exchangecredit')}app.track.CPA_point_tab_click(this.data.tabsReal[e.detail.index].label)},gotoid(id){var that = this;var query = wx.createSelectorQuery().in(that);query.selectViewport().scrollOffset()// #comm 跳转到指定id位置query.select(id).boundingClientRect();query.exec(function (res) {console.log(res);if(id==='#calendar'){wx.pageScrollTo({scrollTop: 0,duration: 300});}else if(id==='#taskcredit'){let miss = res[0].scrollTop + res[1].top-100;if(that.data.taskList.length<3&&!that.data.toggleFlag){that.setData({tabIndex:1})}wx.pageScrollTo({scrollTop: miss,duration: 0});} else {let miss = res[0].scrollTop + res[1].top-130;if(that.data.taskList.length<3&&!that.data.toggleFlag){that.setData({tabIndex:2})}wx.pageScrollTo({scrollTop: miss,duration: 0});}that.data.timemachine = setTimeout(function() {that.data.flagclick = false}, 100);});},/*** 滚动事件*/onPageScroll(e) {if(this.data.flagclick){return}var scrollTop = e.scrollTop;console.log('scrollTop',scrollTop)if(this.data.tabsReal.length===3){this.alltab(scrollTop)}if(this.data.tabsReal.length===2){if(scrollTop>400){this.alltab(scrollTop)}if(scrollTop<200||scrollTop===0){this.setData({tabIndex:0})}if(scrollTop>200&&scrollTop<400){this.setData({tabIndex:1})}}},alltab(scrollTop){// 第一个tabif(scrollTop<200||scrollTop===0){console.log('1111',scrollTop)this.setData({tabIndex:0})}if(this.data.toggleFlag){// calendar 关闭if(scrollTop>200&&scrollTop<(this.data.taskList.length*60+400)){if(this.data.tabsReal.length>1){if(this.data.tabIndex!==2){this.setData({tabIndex:1})}}}}else{// 日历打开if(scrollTop>400&&scrollTop<(this.data.taskList.length*60+595)){if(this.data.tabsReal.length>1){this.setData({tabIndex:1})}}}// 日历关闭打开if(this.data.toggleFlag){// calendar 关闭if(scrollTop>=(this.data.taskList.length*60+400)){if(this.data.tabsReal.length>2){this.setData({tabIndex:2})}}}else{// 日历打开// 最后一个tabsif(scrollTop>(this.data.taskList.length*60+600)){if(this.data.tabsReal.length>2){this.setData({tabIndex:2})}}}},

小程序吸顶tab 滚动监听相关推荐

uniapp微信小程序左上角返回按钮的监听
项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接 ...
小程序如何在其他页面监听globalData中值的变化？
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言这几天去面试,多 ...
小程序横屏竖屏切换监听
一.在需要切换的页面.json中配置代码注:需要提前开启手机的屏幕旋转 {"usingComponents": {"nav-bar": "/pack ...
小程序原生swiper中bindtransition监听滑动效果
需求:触摸滑动swiper,轮播图的图片高度随之变化 wxml <view><swiper next-margin="50rpx" previous-margin ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
vue 滑动置顶功能_VUE 实现滚动监听导航栏置顶的方法_蜡烛_前端开发者
非重点的代码,比如样式啥的,我就不放上来了,一笔带过简略的写一下 1. data () data () { paddingBottom: '1.5rem', // 给最外层div一个padding- ...
vue中给window添加滚动监听无效的解决方案
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作. 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mou ...
Android 对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming),请尊重他人的辛勤劳动成果,谢谢! 随着移动互联网的快速发展,它已经和我们的生活息息相关了,在 ...
Android对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果
Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果转:http://blog.csdn.net/xiaanming/article/details/17374599 很荣 ...

小程序吸顶tab 滚动监听

小程序吸顶tab 滚动监听相关推荐

最新文章

热门文章

小程序 吸顶tab 滚动监听

小程序 吸顶tab 滚动监听相关推荐

最新文章

热门文章

小程序吸顶tab 滚动监听

小程序吸顶tab 滚动监听相关推荐