微信小程序锚点

淩亂°似流年 2021-07-24 22:41 440阅读 0赞

<view>
      <view class="flexRow tab_bo {
       {top>550 ? 'topnav' : ''}}">
          <view class="tab" bindtap="jumpTo" data-tab_index="item0">
            <view class="text" style="color:{
       {toView=='item0'?'#000':''}}">商品详情</view>
            <view class="_" wx:if="{
       {toView=='item0'}}"></view>
          </view>
          <view class="tab" bindtap="jumpTo" data-tab_index="item1">
            <view class="text" style="color:{
       {toView=='item1'?'#000':''}}">案例 </view>
            <view class="_" wx:if="{
       {toView=='item1'}}"></view>
          </view>
          <view class="tab" bindtap="jumpTo" data-tab_index="item2">
            <view class="text" style="color:{
       {toView=='item2'?'#000':''}}">评价 </view>
            <view class="_" wx:if="{
       {toView=='item2'}}"></view>
          </view>
          <view class="tab" bindtap="jumpTo" data-tab_index="item3">
            <view class="text" style="color:{
       {toView=='item3'?'#000':''}}">购买须知 </view>
            <view class="_" wx:if="{
       {toView=='item3'}}"></view>
          </view>
    
        </view>
       <view>
         <view id="item0">1</view>
         <view id="item1">2</view>
         <view id="item2">3</view>
         <view id="item3">4</view>
       </view>
     </view>

.tab_bo{
      background: #fff;
    }
    .tab_bo .tab{
      flex:1;
      text-align: center;
      }
      .tab_bo .tab .text{
        line-height: 60rpx;
        font-size: 32rpx;
        color: #999999;
      }
      .tab_bo .tab ._{
        /* width: 40rpx; */
        height: 5rpx;
        background: #FC5A8E;
        margin: 0 25rpx;
      }
      .topnav {
        position: fixed;
        top: 0rpx;
        width: 100%;
        z-index: 99;
        background: #fff;
      
      }

jumpTo: function (e) {
    
        // 获取标签元素上自定义的 data-opt 属性的值
        let target = e.currentTarget.dataset.tab_index;
    
        this.setData({
          toView: target
        })
      },