uniapp 导航栏默认执行点击0索引？
如何默认就让 导航栏 scroll-view @click 点击 0 索引 也就是 【全部】
这个标签
<template> <view class="body-view"> <!-- 使用scroll-view实现tabs滑动切换 --> <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent"> <view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)" @click="swichMenu(item.id - 1)"> <view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'"> <text class="menu-topic-text">{{item.name}}</text> <view class="menu-topic-bottom"> <view class="menu-topic-bottom-color"></view> </view> </view> </view> </scroll-view> <!-- 内容 --> <swiper class="swiper-box-list" :current="currentTab" @change="swiperChange"> <swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id"> <view class="swiper-item"> <view class="list"> <view class="item"> <view class="item-start"> <van-tag type="success">标题</van-tag> <span class="item-start-value">{{item.time}}</span> </view> <view class="item-end" data-lat="" data-lng=""> <van-tag type="danger">时间</van-tag> <span class="item-end-value">{{item.time}}</span> </view> <view class="item-time"> <span> 地点</span> <span class="item-end-value">{{item.location}}</span> </view> <view class="item-seating"> <van-tag type="primary">发布人:</van-tag> <span>{{item.publisher}}</span> </view> <van-divider></van-divider> <view class="item-remark"> 备注：{{item.remark}} </view> </view> </view> </view> </swiper-item> </swiper> </view></template><script> export default { data() { return { tabs: [{ id: 1, name: '全部' }, { id: 2, name: '吃吃喝喝' }, { id: 3, name: '生活琐碎' }, { id: 4, name: '户外放风' }, { id: 5, name: '健身自律' }, { id: 6, name: '其他' }, ], currentTab: 0, tabCurrent: 'tabNum1', // Tab切换内容 swiperDateList: [ { id: 1, title:'一起吃个饭', time:2020, location: '1111', publisher: '小丁', remark: '备注' }, { id: 1, title:'一起吃个饭2', time:222, location: '2222', publisher: '小丁', remark: '备注2' }, { id: 2, content: '交通交通' }, { id: 3, content: '住房' }, { id: 4, content: '社会保障' }, { id: 5, content: '民生热点' }, { id: 6, content: '即日头条' }, ], } }, onLoad() { }, methods: { swichMenu(id) { this.currentTab = id console.log(11,id) this.tabCurrent = 'tabNum'+ id }, swiperChange(e) { console.log(22,e.detail.current) let index = e.detail.current this.swichMenu(index) } } }</script><style scoped lang="scss"> .body-view { height: 100vh; width: 100%; display: flex; flex: 1; flex-direction: column; overflow: hidden; align-items: flex-start; justify-content: center; } .top-menu-view { display: flex; position: fixed; top: 0rpx; left: 0; white-space: nowrap; width: 100%; background-color: #FFFFFF; height: 86rpx; line-height: 86rpx; border-top: 1rpx solid #d8dbe6; .menu-topic-view { display: inline-block; white-space: nowrap; height: 86rpx; position: relative; .menu-topic-text { font-size: 30rpx; color: #303133; padding: 10rpx 40rpx; } // .menu-topic-act { // margin-left: 30upx; // margin-right: 10upx; // position: relative; // height: 100%; // display: flex; // align-items: center; // justify-content: center; // } .menu-topic-bottom { position: absolute; bottom: 0; width: 100%; .menu-topic-bottom-color { width: 40rpx; height: 4rpx; } } .menu-topic-act .menu-topic-bottom { display: flex; justify-content: center; } .menu-topic-act .menu-topic-bottom-color { background: #3d7eff; } } } .swiper-box-list { width: 100%; padding-top: 200rpx; flex:1; background-color: #FFFFFF; .swiper-topic-list { width: 100%; } }</style>共有1个答案
onLoad() { this.swichMenu(0);},-
ap.onTitleClick(CALLBACK) 监听导航栏标题点击事件。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <h2 class="am-ft-center">点击导航栏文字</h2> <script>
-
我使用Bootstrap4创建了这个可折叠的导航栏，它工作得很好，但我希望在用户单击链接时关闭它。有办法吗？谢谢 html导航栏： css用于。图标栏，因为引导程序4不使用图标栏类。
-
我目前有一个navbar是（我更希望它是）居中的。然而，在整个完成我的网站我完全忘记了添加一个搜索栏。我决定使用W3Schools中的代码将搜索栏合并到我的navbar的右侧，而不影响任何navbar文本（主页、游戏、办公室、结帐、联系人），并且与我的navbar在同一行上。我该如何做到这一点呢？ 这是我的标题： 标题和搜索栏的CSS代码： 到目前为止是这样的：
-
导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的包裹。它很容易扩展，而且，在折叠板插件的帮助下，它可以轻松与幕后内容整合。 基础 这些是你开始使用导航条之前需要知道的东西： 导航条要求一个包裹的.navbar以及一个配色方案类（可以是.navbar-default或者.navbar-inverse）。 当在一个导航条中使用多个组件时，必须用一些 对齐类 。 导航条以及它们的内容默
-
导航栏是一个固定区域 （在固定和穿透布局类型中） 。它位于屏幕顶部，包含页面标题和导航元素。 导航栏包含3个部分：左、中、右。每个部分都可以包含任意的HTML内容，但推荐按照如下方式使用： 左部 用来放置返回链接、图标以及单独的文字链接。 中部 用来显示页面标题和标签链接（即按钮控制）。 右部 和左部一样。 导航栏布局 导航栏布局相当简单，根据字面意思即可理解： <div class="navba
-
navigation-bar 属性 类型 默认值 必填 说明 最低版本 title string 否 导航条标题 2.5.1 loading boolean false 否 是否在导航条显示 loading 加载提示 2.5.1 front-color string 否 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 2.5.1 background-c