实现可左右滑动的导航菜单页面
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
灰太狼
柔情只为你懂
忘是亡心i
我就是我
比眉伴天荒
Bertha 。
系统管理员
刺骨的言语ヽ痛彻心扉
还没有评论，来说两句吧...