tabs+吸顶

tabs使用

<scroll-view scroll-x class="bg-white nav scrollxclass">
  <view class="flex text-center">
    <view class="cu-item {{0==TabCur?'text-green cur':''}} flex-sub" bindtap="tabSelect" data-id="0">
      <text class="cuIcon-locationfill"></text> 待签到
    </view>
    <view class="cu-item {{1==TabCur?'text-green cur':''}} flex-sub" bindtap="tabSelect" data-id="1">
      <text class="cuIcon-squarecheckfill"></text> 已签到
    </view>
  </view>
</scroll-view>

<view wx:if="{{TabCur==0}}">
	<view>块1</view>
</view>
<view wx:if="{{TabCur==1}}">
 	<view>块2</view>
</view>

<scroll-view>这里是colorui的样式，我们可以利用wx:if配合tab使用，点击那个就显示出那个

linui和colorui的配合使用，实现tab吸顶

<l-sticky scrollTop="{{scrollTop}}" mode="css">
 <l-sticky-item top="60" l-header-sticky-class="l-header-sticky-class">
    <scroll-view scroll-x class="bg-white nav scrollxclass" slot="header">
      <view class="flex text-center">
        <view class="cu-item {{0==TabCur?'text-green cur':''}} flex-sub" bindtap="tabSelect" data-id="0">
          <text class="cuIcon-locationfill"></text> 待签到
        </view>
        <view class="cu-item {{1==TabCur?'text-green cur':''}} flex-sub" bindtap="tabSelect" data-id="1">
          <text class="cuIcon-squarecheckfill"></text> 已签到
        </view>
      </view>
    </scroll-view>
    <view style="margin-top:30rpx" slot="body">
      <view wx:if="{{TabCur==0}}">
        <block wx:for="{{unsignlist}}" wx:for-item='item'>
          <view class="unsignitem">
            <view class="unsigncontent">
              <text class="cuIcon-btn text-green"></text>
              <text class="text-grey">{{item.title}}</text>
            </view>
            <view class="action">
              <button style="width:18vw" class="cu-btn round bg-gradual-blue" data-lid="{{item.lid}}"
                data-locax="{{item.location_x}}" data-locay="{{item.location_y}}" data-range="{{item.rangement}}"
                bindtap="gotonowpoint">去签到</button>
            </view>
          </view>
        </block>
      </view>
      <view wx:if="{{TabCur==1}}">
        <block wx:if="{{launch_len == 0}}">
          <view class='hasNoData'>
            <image class='noDataIcon ' src='../../images/nomessage.png'></image>
            <view class='noDataInfo text-grey'>今日未发起签到</view>
          </view>
        </block>
        <block wx:elif="{{launch_len != 0}}">
          <l-sticky bind:linunsticky="linunsticky" bind:linsticky="linsticky" scrollTop="{{scrollTop}}" mode="js">
            <l-sticky-item l-header-sticky-class="l-header-sticky-class">
              <view slot="body" class="dynamic-card-body">
                <block wx:for="{{recordList}}" wx:for-item='item'>
                  <l-card plaintext l-class="card" style="width:100vw; margin-top:10rpx;" data-lid="{{item.lid}}"
                    data-title="{{item.title}}" bindtap="showDetail">
                    <view class="cu-item shadow">
                      <view class="flex solid-bottom justify-between" style="align-items:center;">
                        <view class="text-black text-bold text-xl">{{item.title}}</view>
                        <view class="cu-tag bg-{{item.linktype==1?'red':'green'}} light sm round">
                          {{item.linktype==1?'上课签到':'下课签到'}}</view>
                      </view>
                      <view class="desc text-grey">
                        <view class="content margin-top text-sm">发起人：<view class=" text-black">{{item.name}}
                          </view>
                        </view>
                        <view class="content margin-top-sm"> 签到时间：<view class=" text-black">{{item.signintime}}
                          </view>
                        </view>
                        <view class="content margin-top-sm"> 签到说明：<view class=" text-black">
                            {{item.caption==''?'暂无说明':item.caption}}
                          </view>
                        </view>
                      </view>
                    </view>
                  </l-card>
                </block>
              </view>
            </l-sticky-item>
          </l-sticky>
        </block>
      </view>
    </view>
  </l-sticky-item>
</l-sticky>