思路
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" -->
<view
style="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}}"
placeholder
sliderWidth="{
{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 = true
clearTimeout(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){
// 第一个tab
if(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{
// 日历打开
// 最后一个tabs
if(scrollTop>(this.data.taskList.length*60+600)){
if(this.data.tabsReal.length>2){
this.setData({
tabIndex:2})
}
}
}
},