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

系统管理员 2022-05-27 00:53 221阅读 0赞

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.运行截图：

![297_method_get-resource_shareToken_A3483B2C2DA1468E89401607190BDF8E_entryId_192425478][]

**小程序教程地址：[小程序教程集合地址][Link 1]**

**如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的，都可以可以加我订阅号，订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat：lzqcode**

![296_method_get-resource_shareToken_A3483B2C2DA1468E89401607190BDF8E_entryId_192425478][]

[297_method_get-resource_shareToken_A3483B2C2DA1468E89401607190BDF8E_entryId_192425478]: https://note.youdao.com/yws/api/group/67516516/noteresource/B528969FC6F74E89AE5F6561C90D93E3/version/297?method=get-resource&shareToken=A3483B2C2DA1468E89401607190BDF8E&entryId=192425478
[Link 1]: https://blog.csdn.net/linzhiqiang0316/article/details/79858852
[296_method_get-resource_shareToken_A3483B2C2DA1468E89401607190BDF8E_entryId_192425478]: https://note.youdao.com/yws/api/group/67516516/noteresource/CB1C2428A61A467EBC0844775392550C/version/296?method=get-resource&shareToken=A3483B2C2DA1468E89401607190BDF8E&entryId=192425478