导航栏滚动效果应用

最新推荐文章于 2022-03-06 05:25:43 发布
最新推荐文章于 2022-03-06 05:25:43 发布
阅读量314 收藏
点赞数
分类专栏： vue js 文章标签： jquery css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47144417/article/details/119003574
版权
vue 同时被 2 个专栏收录
32 篇文章 1 订阅
订阅专栏
js
10 篇文章 1 订阅
订阅专栏

效果：1.左边数据滚动到相应位置 右边导航对应
2.点击右侧导航 自动定位该数据
在这里插入图片描述
效果1 主要代码：
js代码：

 mounted() {
    window.addEventListener('scroll', this.checkScroll);
  },

 // 页面滚动对应字母导航
    checkScroll() {
      this.letterArr.forEach((item) => {
        // 判断数据是否含有该字母
        this.detailList.forEach((li) => {
          // 如果有
          if (li.letter == item) {
            var cont1 = $(`.main_table .letter${item}`).offset().top - 100;
            var className = $(`.main_table .letter${item}`).attr('class');
            className = className.substr(className.length - 1, 1);
            var cont2 =
              $(`.main_table .letter${item}`).offset().top +
              $(`.main_table .letter${item}`).height() -
              100;
            var t =
              document.documentElement.scrollTop || document.body.scrollTop;
            if (t >= cont1 && t <= cont2) {
              this.letterArr.forEach((item, i) => {
                if (item == className) {
                  this.currentletter = i;
                }
              });
            } else {
            }
          }
        });
      });
    },

效果2 主要代码：
js代码：

  toCurrentletter(i) {
      this.currentletter = i;
      this.detailList.forEach((item) => {
        if (item.letter == this.letterArr[i]) {
          $('body,html').animate(
            { scrollTop: $(`.letter${this.letterArr[i]}`).offset().top - 80 },
            1000,
          );
        }
      });
    },

下面是全部代码：

<template>
  <div class="service_contain">
    <Spin size="large" fix v-if="spinShow"></Spin>

    <div class="bgImg">
      <img src="../assets/img/service/servicebanner.png" alt="" />
      <span class="banner_title">
        {{ $store.state.isChinese ? '服务中心' : 'Service center' }}</span
      >
    </div>

    <div class="carousel">
      <div
        class="businessBox"
        @mouseenter="moreEnter(i)"
        @mouseleave="moreLeave(i)"
        v-for="(item, i) in navList"
        :key="i + item.src"
        @click="toChangeTabs(item, i)"
      >
        <div
          style="height:100%"
          :class="{ colorLineHeight: item.id == moduleId }"
        >
          <div class="triangle" v-if="item.id == moduleId"></div>
          <div class="businessBox_content">
            <img
              :src="item.isChangeHeight ? item.hoverSrc : item.src"
              alt=""
              :key="imgNum"
            />
            <h3
              class="title"
              :class="{ colorfont: item.id == moduleId }"
              style="text-align:center"
            >
              {{ $store.state.isChinese ? item.name : item.nameEn }}
            </h3>
            <h4
              :class="{ colorfont: item.id == moduleId }"
              style="text-align:center"
            >
              {{ $store.state.isChinese ? item.summary : item.summaryEn }}
            </h4>
          </div>
        </div>
      </div>
    </div>

    <!-- detail -->
    <div class="companyList">
      <h2 style="margin:30px 5%">
        {{ $store.state.isChinese ? '合格服务商' : 'Qualified service provider'
        }}<span style="color:#999999">
          {{
            $store.state.isChinese
              ? '按首字母排序(排名不分先后)'
              : 'Alphabetical order'
          }}</span
        >

        <RadioGroup
          v-model="radioGroup"
          style="margin-left:20px;font-weight:400"
        >
          <Radio
            :label="$store.state.isChinese ? '查看全部' : 'Look at all'"
          ></Radio>
          <Radio
            :label="$store.state.isChinese ? '查看收藏' : 'See the collection'"
            style="margin-left:20px;"
          ></Radio>
        </RadioGroup>
      </h2>

      <div class="main_table">
        <ul
          v-for="(item, i) in detailList"
          :key="i + 'pp'"
          :class="'letter' + item.letter"
        >
          <li
            v-for="(li, m) in item.list"
            :key="m + 'yy'"
            @click="openUrl(li.naviUrl)"
          >
            <div style="color:#666666;width:200px">
              {{ li.isletter ? li.letter : '' }}
            </div>
            <div
              class="bg_div"
              style="border-bottom: 1px solid #F0F0F0;padding-left:50px;width:300px"
            >
              <span class="logo">{{ item.letter }} </span>
            </div>
            <div
              class="bg_div"
              style=" border-bottom: 1px solid #F0F0F0;  overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;"
            >
              {{ $store.state.isChinese ? li.naviName : li.naviNameEn }}
            </div>
            <div class="bg_div" style=" border-bottom: 1px solid #F0F0F0;">
              {{ $store.state.isChinese ? li.country : li.companyEn }}
            </div>
            <div
              class="bg_div"
              style=" border-bottom: 1px solid #F0F0F0;  overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;"
            >
              {{ li.naviUrl }}
            </div>
            <div
              class="bg_div"
              style=" border-bottom: 1px solid #F0F0F0;text-align: right;width:100px"
            >
              <Icon
                type="ios-heart"
                :color="li.iscolor ? 'red' : '#BEBEBE'"
                @click.stop="collection(i, m)"
                :key="colorNum"
              />
            </div>
          </li>
        </ul>
        <ul class="more_ul">
          <li style="text-align: center;">
            <span class="more">
              {{ $store.state.isChinese ? '查看更多' : ' To view more' }}
            </span>
          </li>
        </ul>
        <div class="letter" :class="isFixed ? 'Fixed' : ''">
          <p
            :class="{ currentletterColor: currentletter == i }"
            v-for="(item, i) in letterArr"
            :key="i + 'll'"
            @click="toCurrentletter(i)"
          >
            {{ item }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@/assets/js/util.js';
export default {
  name: 'service',
  data() {
    return {
      radioGroup: '查看全部',
      colorNum: 0,
      currentletter: 0,
      letterArr: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        '#',
      ],
      moduleId: 4,
      detailList: [],
      spinShow: false,
      navList: [],
      imgList: [
        {
          src: require('../assets/img/home/a1.png'),
          hoverSrc: require('../assets/img/home/a01.png'),
        },
        {
          src: require('../assets/img/home/a2.png'),
          hoverSrc: require('../assets/img/home/a02.png'),
        },
        {
          src: require('../assets/img/home/a3.png'),
          hoverSrc: require('../assets/img/home/a03.png'),
        },
        {
          src: require('../assets/img/home/a4.png'),
          hoverSrc: require('../assets/img/home/a04.png'),
        },
      ],

      value2: 0,
      imgNum: 0,
      currentfade: null,
      currentTab: null,
      isFixed: false,
    };
  },
  created() {
    this.getNavList();
    this.moduleId = this.$route.query.moduleId ? this.$route.query.moduleId : 4;
    if (this.$route.query.i) {
      this.toChangeTabs(this.$route.query.item, this.$route.query.i);
    } else {
    }

    this.getNaviListByModuleId();
  },
  watch: {},
  mounted() {
    window.addEventListener('scroll', this.showIcon);
    window.addEventListener('scroll', this.checkScroll);
  },

  methods: {
    // 页面滚动对应字母导航
    checkScroll() {
      this.letterArr.forEach((item) => {
        // 判断数据是否含有该字母
        this.detailList.forEach((li) => {
          // 如果有
          if (li.letter == item) {
            var cont1 = $(`.main_table .letter${item}`).offset().top - 100;
            var className = $(`.main_table .letter${item}`).attr('class');
            className = className.substr(className.length - 1, 1);
            var cont2 =
              $(`.main_table .letter${item}`).offset().top +
              $(`.main_table .letter${item}`).height() -
              100;
            var t =
              document.documentElement.scrollTop || document.body.scrollTop;
            if (t >= cont1 && t <= cont2) {
              this.letterArr.forEach((item, i) => {
                if (item == className) {
                  this.currentletter = i;
                }
              });
            } else {
            }
          }
        });
      });
    },
    // 收藏事件
    collection(i, m) {
      this.$Modal.warning({
        title: '提示',
        content: '请登录账号',
      });
      // 登录后可收藏
      // this.colorNum++;
      // this.detailList[i].list[m].iscolor = !this.detailList[i].list[m].iscolor;
    },
    showIcon() {
      if (document.documentElement.scrollTop > $('.letter').height()) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    openUrl(naviUrl) {
      window.open(naviUrl, '_blank');
    },
    toCurrentletter(i) {
      this.currentletter = i;
      this.detailList.forEach((item) => {
        if (item.letter == this.letterArr[i]) {
          $('body,html').animate(
            { scrollTop: $(`.letter${this.letterArr[i]}`).offset().top - 80 },
            1000,
          );
        }
      });
    },
    naviUrl(naviUrl) {
      window.open(naviUrl, '_blank');
    },
    toChangeTabs(item, v) {
      this.moduleId = item.id;
      this.navList.forEach((item, i) => {
        if (v != i) {
          this.navList[i].isChangeHeight = false;
        } else {
          this.navList[i].isChangeHeight = true;
        }
      });
      this.getNaviListByModuleId();
    },
    getNaviListByModuleId() {
      util
        .get(`/fta/fta/getNaviListByModuleId?moduleId=${this.moduleId}`)
        .then((response) => {
          if (response.code == 100) {
            let res = response.entity || [];
            res.forEach((item, i) => {
              item.list.forEach((li, m) => {
                li.letter = item.letter;
                li.isletter = false;
                li.iscolor = false;
                item.list[0].isletter = true;
              });
            });
            this.detailList = res;
          }
        })
        .catch((error) => {});
    },

    getNavList() {
      this.spinShow = true;
      util
        .get('/fta/fta/getModuleList')
        .then((response) => {
          if (response.code == 100) {
            this.navList = response.entity || [];
            this.imgList.forEach((item, m) => {
              this.navList[m].isChangeHeight = false;
              if (this.$route.query.i) {
                this.navList.forEach((item, i) => {
                  if (this.$route.query.i == i) {
                    this.navList[i].isChangeHeight = true;
                  }
                });
              } else {
                this.navList[m].isChangeHeight = false;
                this.navList[0].isChangeHeight = true;
              }

              for (var key in item) {
                this.navList[m][key] = item[key];
              }
            });
            this.spinShow = false;
          }
        })
        .catch((error) => {});
    },

    moreEnter(v) {
      if (this.navList[v].fade == v) {
        this.currentfade = v;
      }
      this.imgNum++;
    },
    moreLeave(v) {
      if (this.navList[v].fade == v) {
        this.currentfade = v;
      }
      this.imgNum++;
    },
  },
};
</script>

<style lang="less" scoped>
.service_contain {
  width: 100%;
  position: relative;
  margin-top: -100px;
  min-width: 1200px;

  .currentletterColor {
    color: #0092df !important;
    font-weight: bold;
  }
  .colorfont {
    color: #ffffff !important;
  }
  .colorLineHeight {
    background: linear-gradient(
      180deg,
      rgba(2, 146, 194, 0.9),
      rgba(3, 124, 183, 0.9) 100%
    );
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    color: #ffffff;
  }

  .bgImg {
    position: relative;
    width: 100%;
    height: 60%;
    .banner_title {
      position: absolute;
      z-index: 9999;
      right: 5%;
      bottom: 10%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      font-size: 50px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }

  .carousel {
    min-width: 1200px;
    position: relative;
    width: 100%;
    height: 360px;
    display: flex;
    background: #ebebeb;
    .businessBox {
      display: inline-block;
      position: relative;
      height: 100%;
      width: 25%;
      border-right: 1px solid #e0e0e0;
      cursor: pointer;
      .businessBox:last-child {
        border-right: none;
      }

      .businessBox_content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 50px;
        height: 100%;
        img {
          width: 90px;
          height: 90px;
        }
        .title {
          font-size: 30px;
          font-weight: normal;
          color: #333333;
          margin-top: 50px;
        }
        h4 {
          font-size: 16px;
          color: #666666;
          margin-top: 30px;
        }
        ul {
          position: relative;
          height: 0px;
          overflow: hidden;
          margin-top: 30px;
          li {
            width: 280px;
            height: 50px;
            border-bottom: 1px solid #fff;
            text-align: center;
            line-height: 50px;
            color: #ffffff;
          }
          li:first-child {
            background: #ffffff;
            opacity: 0.75;
            color: #0092df;
          }
          li:last-child {
            border-bottom: none;
          }
        }
        .more {
          margin-top: 60px;
          width: 140px !important;
          height: 50px !important;
          border: 1px solid #0092df !important;
          opacity: 1;
          border-radius: 80px;
          color: #0092df;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .businessBox:hover {
      background-color: #ddd;
    }
    .triangle {
      left: 50%;
      margin-left: -13px;
      bottom: -40px;

      position: absolute;
      box-sizing: border-box;
      width: 26px;
      height: 12px;
      border: 20px solid;
      border-color: rgba(3, 124, 183, 0.9) transparent transparent transparent;
    }
  }

  .companyList {
    width: 100%;
    background-color: #fff;
    padding-top: 50px;
    min-height: 1000px;

    .main_table {
      margin-bottom: 100px;
      padding-top: 30px;
      position: relative;
      width: 100%;
      padding: 0 5%;
      ul {
        // position: relative;
        width: 90%;
        li {
          height: 100px;
          line-height: 100px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          div {
            width: 100%;
            height: 100px;
            display: inline-block;
            font-size: 20px;
            font-weight: normal;
            color: #222222;
          }

          div:nth-child(1) {
            margin-right: none;
            white-space: none;
            text-overflow: none;
            padding-right: none;
          }

          .logo {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: #0092df;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            color: white;
          }
        }
        li:hover .bg_div {
          cursor: pointer;
          background-color: #f0f0f0;
          border-bottom: 1px solid #f0f0f0;
        }

        .more_ul {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .more_ul:hover {
          background-color: none;
        }
        .more {
          display: inline-block;
          margin: 50px auto;
          width: 140px;
          height: 50px;
          border: 1px solid #0092df !important;
          opacity: 1;
          border-radius: 4px;
          color: #0092df;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
      }
      .letter {
        position: absolute;
        top: -30px;
        right: 10%;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p {
          padding: 4px 3px;
          line-height: 20px;
          color: #666666;
          cursor: pointer;
        }
      }
      .Fixed {
        position: fixed;
        top: 80px;
        right: 10%;
      }
    }

    h2 {
      font-size: 20px;
      span {
        color: #ccc;
        font-size: 14px;
        font-weight: normal;
        margin-left: 10px;
      }
    }
  }
}
</style>
tamia_nice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动web--滚动（可以滑动的）导航栏的制作
weixin_41105030的博客
01-05 1万+
滑动的导航栏 有时候导航栏的长度过于长，我们为了界面的美观和用户体验，会将导航栏在一行（或则一列）显示，超出部分隐藏，而且不用管内容的长短，有利于前后台数据的交互，大部分情况是：在移动web网站中，容器中的ul过长，我们通常会将ul超出容器的部分隐藏 移动网站上的横向导航栏 某直播平台的横向滚动导航栏–效果浏览：https://m.douyu.com/ 某新闻平台的横向滚动导航栏–效...
JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态
weixin_34280237的博客
05-18 1650
近来，小码哥应公司需求方要求，要在未来一个专题页面中加入一个效果：即，侧栏导航点击实现页面内容部分运动到相应位置，以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果。起初小码哥做的时候，只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方（在此可以查看小码哥先前写的关于锚点的文章）；而随滚动条实现按钮和内容相对应的效果没有做出来，由于项目专题的时限问...
滑动导航栏效果 html+css+js
你好呀，很高兴你在看这里~
05-01 5602
一.先看效果（完整代码在最后）： 实现并不难，但是初学 js 时拿来练手也是很不错的~ 二.实现过程（可一步一步跟着实现）： 1. 先定义标签。container就是底层盒子，a标签就是导航栏的各个标签，line就是滑动的下划线。： <div class="container"> <a href="#" class="label change">HOME</a> <a href="#" class="label">ARTICL
jQuery简单实现导航栏根据滑动自动悬浮效果
任鹏鹏博客
09-15 8913
jQuery简单实现导航栏根据滑动自动悬浮效果 今天在网上看一些别人的一些网站，都觉得很厉害，写插件什么的，无意间看到一款基于插件为导航栏自动悬浮插件，当时看到之后觉得挺简单，然后便自己也开始试着写了一下。 主要用处就是一个导航栏本来是固定的，没有自动悬浮在网站的最顶部，但是当页面下滑到导航栏的位置时，开始自动悬浮。再次向上拉到导航栏的位置时，导航栏再次固定。菜鸟编程，大鸟勿喷。 案例开始,全部
滚动条显示导航栏
chen2745213271的博客
05-29 1130
首先写一个简易的顶部导航栏，并写上一些简易的CSS样式来装饰一下。如下图 注意，CSS里我在ul标签上写了固定定位且top赋值为-50px，因为ul标签的高度是50px而我又写了固定定位这时候把top赋值为-50px的话就会刚刚好把ul标签带到屏幕上面，也就会看起来把ul标签隐藏了 HTML部分下面有个div我是给了1200px的高度，因为这是一个简易的案例，所以我用了个盒子把页面顶了起来，这样子页面上就会有滚动条供我们使用。 下面是js部分了，首先给文档绑定滚动条滚动事件并使用事件对象，然后
jQuery实现带滚动线条导航效果的方法
10-24
在网页设计中，导航栏是页面布局的重要组成部分，它帮助用户快速访问网站的不同部分。而带滚动线条的导航效果能够增强用户体验，使用户更清晰地了解当前所在的位置。本篇文章将详细讲解如何使用jQuery实现这一效果。...
iOS 开发中的 导航栏滚动 效果实现
10-23
这篇教程将深入探讨如何在iOS中实现导航栏滚动效果，以优雅地处理多于屏幕宽度的导航按钮。 首先，我们要理解iOS的UINavigationController的工作原理。UINavigationController管理着一个栈状的UIViewController序列...
iOS仿网易新闻滚动导航条效果
08-27
iOS仿网易新闻滚动导航条效果 iOS仿网易新闻滚动导航条效果是通过自定义滚动视图（UIScrollView）和视图控制器（UIViewController）来实现的。该效果主要通过两个滚动视图：标题滚动视图和内容滚动视图，来实现滚动...
jQuery仿天猫左侧导航滚动效果.zip
07-11
在本文中，我们将深入探讨如何使用jQuery实现天猫左侧导航滚动效果。这个效果是网页设计中常见的一种交互方式，它能够使用户在浏览长页面时轻松地访问导航菜单，提升用户体验。我们将从以下几个方面来详细解释这个...
微信小程序仿今日头条导航栏滚动解析
10-16
通过以上步骤，我们就成功地在微信小程序中实现了仿今日头条的导航栏滚动效果。这个功能不仅提升了用户体验，还增强了应用的交互性。在实际开发过程中，可能还会遇到其他问题，如性能优化、适配不同屏幕尺寸等，但这...
导航栏滑动效果
weixin_42489478的博客
01-10 494
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> 　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt...
html横向导航栏滑动效果,仿今日头条横向滚动导航栏--原生js
weixin_29117669的博客
06-03 897
咳咳！先打一波小广告，在上一篇里忘记了，那啥……我的那个个人博客做好了-->(我的博客)好嘞，言归正传，说说我们的效果。其实就是实现横向滑动，进行选择。原理：鼠标按下，获取当前鼠标坐标，作为起始坐标；鼠标移动，获取坐标，与起始坐标进行一系列的数学运算；给 left 赋值，改变位置；移动过多，超过时进行处理。function scrollTabX() {let nav = document.g...
html导航栏上下滑动效果,JQuery实现导航栏上下滑动效果
weixin_42151036的博客
06-03 1085
本文采用嵌套的ul、li代码实现二级导航菜单，并实现导航菜单栏的背景具有上下滑动的效果，注意此处鼠标悬停效果采用的是mouseenter和mouseleave,这对函数可以保证当鼠标在二级菜单移动时，导航菜单的背景不变化，如果采用mouseover和mouseout，鼠标在二级菜单移动一次，导航菜单背景就会上下滑动一次，用户体验差，大家可以自行修改代码观看效果，现将三部分代码贴入：--------...
HTML&CSS实现导航栏滑动背景效果
qq_39224105的博客
12-30 3610
大家可以先看一下背景滚动的效果 这个效果需要注意的就是鼠标悬浮的时机hover，鼠标在悬浮到不同的选项上时，背景的那个色块距离左侧的边距会发生改变。在鼠标离开导航栏时，色块会返回到你定义的那个位置(这个位置在实际的开发中，肯定是当前页面的位置，这个位置你可以自行更改)。 下面是代码部分： html部分： <div class="container"> <nav> <a href="#">home</a> <a href="#"&
jquery 实现导航栏滑动效果
carrymyteams的博客
07-10 1026
精简的代码实现导航栏滑动效果，实现详解：1.滑块位置：通过父节点position=fixed，子节点position=absolute方式，实现子节点浮动；2.导航栏居中：通过left=0px，right=0px，margin-left=auto，margin-right=auto实现；3.通过jQuery动态改变滑块的Left和Width，然后通过animate实现动画效果。<!DOCTYPE h
带滑动条的导航栏(中)---jQuery实现滑动效果
热门推荐
王文松的博客
12-16 1万+
前言    本节利用jQuery实现最终的滑动效果。 网页代码   navigator2.html    导航栏 (function ($) { $(function () { nav(); }); function nav() { var $liCur = $(".nav-box ul li.cur"),
系统左侧菜单上下滚动功能
Shawn_YuL的博客
02-17 3771
鉴于系统左侧导航菜单的栏目过多，出现有些模块看不到的情况，考虑做一个菜单上下滚动。目前系统左侧导航菜单是easyui的手风琴效果，UI更新后是图片和文字配合形式。以下是对于过程的整理： 一、方案的查找与确定 1、方案1（引入js插件） 参考示例：http://www.js-css.cn/jscode/focus/focus62/# 尝试结果：导入插件，导航模块那里不能展示，一些js方法
常用的导航栏下划线滚动特效
你帅还不是一样敲代码的博客
08-23 2844
很多页面的导航栏经常会用到一些特效，今天直接也谢了一个常用的，就是鼠标移到那个栏目， 下方的横线就会跟着划过去的一个过度效果，用了jq与css3的过度效果实现，接下来贴代码： section> nav class="tab-bar clearfix" id="nav-bar"> a href="#">公司简介a>a href="#">企业理念a>a href="#"
导航栏滚动渐变效果 html+css+js
m0_67392273的博客
03-06 1408
先看效果： 实现： 1.定义导航栏的文字标签： <div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li><a href="#"><a href="#">主页</a></li> <li><a href="#">个人简介</
uniapp顶部滚动导航栏
最新发布
03-16
该组件可以实现顶部的滚动导航栏，并且可以与`uni-swiper`组件结合使用，实现滑动切换页面的效果。 以下是使用`uni-segmented-control`和`uni-swiper`组件实现顶部滚动导航栏的示例代码： ```html (item, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值