小程序滚动的tab标签栏（swiper-scroll-tab）

最新推荐文章于 2024-09-02 12:25:42 发布

三千繁华--成双

最新推荐文章于 2024-09-02 12:25:42 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签：小程序 scroll swiper tab

本文链接：https://blog.csdn.net/weixin_43931427/article/details/97139924

版权

本文介绍了如何在小程序中创建一个滚动的tab标签栏，并且详细讲解了如何实现标签栏固定在顶部的效果。

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

效果图

固定在顶部

在这里插入图片描述

页面swiperTab.wxml
<!--pages/swiperTab/swiperTab.wxml-->
<view class='content'>
  <scroll-view scroll-x="true" class='scroll-tab' scroll-left='{
    {scrollLeft}}'>
    <view wx:for='{
    {tabs}}' wx:key='index' class="tab {
    {select == index ? 'active-tab' : '' }}" style='width:{
      {
      width}}px' catchtap='selectTab' data-index='{
    {index}}' data-id='{
    {item.ip}}'>
      <text>{
  {item.name}}</text>
    </view>
    <view class='underline' style='width:{
      {
      width}}px;left:{
      {
      offset}}px'></view>