如果你想要去掉左侧导航栏菜单项上的点,你可以对样式进行修改。以下是一个示例代码,演示如何去掉菜单项上的点:

<template>
  <view>
    <!-- 顶部导航栏 -->
    <view class='af-head'>
      <span class='af-head-msg' style='font-size: 60rpx;'>&lt;</span>
      <span class='af-head-msg af-head-fuc'>全部功能</span>
    </view>

    <!-- 左侧导航栏 -->
    <view class='sidebar'>
      <ul>
        <li @click='navigateToPage('Page1')'>菜单项1</li>
        <li @click='navigateToPage('Page2')'>菜单项2</li>
        <li @click='navigateToPage('Page3')'>菜单项3</li>
      </ul>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    navigateToPage(page) {
      // 根据菜单项点击事件进行页面跳转或其他操作
      console.log('点击了' + page);
    }
  }
};
</script>

<style>
.af-head {
  position: relative;
  background-color: #629ffc;
  height: 100rpx;
  display: flex;
  justify-content: center;
  font-size: 44rpx;
  font-weight: 500;
  font-family: sans-serif;
}

.af-head-msg {
  position: absolute;
  bottom: 16rpx;
  color: white;
  left: 38rpx;
}

.af-head-fuc {
  text-align: center;
  left: 300rpx;
}

.sidebar {
  width: 200px;
  background-color: red;
  height: 100vh;
  padding-top: 100rpx;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10rpx;
  color: white;
  /* 去掉点 */
  list-style-type: none;
}
</style>

在上述代码中,我在 .sidebar li 的样式中添加了 list-style-type: none;,以去掉菜单项上的点。

请根据你的实际需求和样式要求,进行必要的调整。

希望这次修改满足了你的要求!


原文地址: https://www.cveoy.top/t/topic/RND 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录