实现可左右滑动的导航菜单页面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1433516

1.wxml页面代码：

<view class="nav-scroll">

<scroll-view class="scroll-view\_H" scroll-x="true" style="width: 100%">

<text wx:for="{{section}}" wx:key="id" id="{{item.id}}" catchtap="handleTap" class="nav-name {{item.id == currentId ? 'nav-hover' : ''}}">{{item.name}}</text>

</scroll-view>

</view>

2.wxss页面代码：

white-space:nowrap; 规定段落中的文本不进行换行：

.scroll-view_H{

white-space:nowrap;

width: 100%;

background-color: rgba(255, 255, 255, 0.7);

}

.nav-name{

display:inline-block;

margin:0 5px;

font-size:16px;

color: #2b2e33;

border-bottom: 2px solid transparent;

padding:10px;

}

.nav-hover{

color: #f06000;

border-bottom: 2px solid #f06000;

}

3.js页面代码：

data数据部分：

section: [

  { name: '首页', id: '1001' }, { name: '男装', id: '1032' },

  { name: '鞋包', id: '1003' }, { name: '手机', id: '1004' },

  { name: '电器', id: '1005' }, { name: '食品', id: '1021' },

  { name: '百货', id: '1015' }, { name: '服饰', id: '1121' },

  { name: '汽车', id: '1025' }, { name: '家装', id: '1121' },

  { name: '运动', id: '1205' }, { name: '母婴', id: '4021' },

  { name: '水果', id: '1225' }, { name: '内衣', id: '3121' },

  { name: '家纺', id: '1525' }, { name: '美妆', id: '1521' }

]

函数部分：

// 头部导航点击事件

handleTap: function (e) {

console.log(e);

let id = e.currentTarget.id;

if (id) {

this.setData({ currentId: id })

this.onLoad();

}

}

4.运行截图：

​

​