实现可左右滑动的导航菜单页面_前端实现快捷导航,并可以左右滑动-CSDN博客

本文链接：https://blog.csdn.net/linzhiqiang0316/article/details/79858830

  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  