微信小程序锚点

最新推荐文章于 2023-08-31 13:59:58 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2023-08-31 13:59:58 发布

阅读量301

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_41241504/article/details/109048176

版权

微信小程序专栏收录该内容

94 篇文章 3 订阅

订阅专栏

这个博客展示了商品详情页的交互设计，包括顶部导航栏的动态效果和内容切换功能。用户可以通过点击不同标签（商品详情、案例、评价、购买须知）来浏览相应内容，页面会根据所选标签高亮显示当前选项并更新对应视图。设计中使用了WXML和WXSS进行布局和样式控制，同时结合JavaScript处理用户交互事件。

摘要由CSDN通过智能技术生成


 <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
    })
  },