实现可左右滑动的导航菜单页面
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.运行截图：
小程序教程地址：小程序教程集合地址
如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的，都可以可以加我订阅号，订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat：lzqcode