小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

微信小程序组件 分页菜单带下划线焦点切换

发布时间：2018-04-26 12:02 所属栏目：小程序开发教程

 

 

				
    
					
  1. 
						<view class="edition-container">
    2. 
					
  2. 
						<view class='edition-content'>
    3. 
					
  3. 
						<!-- 1分类菜单-->
    4. 
					
  4. 
						<view class='edition-menu flex'>
    5. 
					
  5. 
						<block wx:key="edmenu" wx:for="{{edmenu}}" wx:for-index="index">
    6. 
					
  6. 
						<view class='flexcca' data-index='{{index}}' bindtap='keyMenu'>
    7. 
					
  7. 
						<text class="menu-title {{edmenuShow==index?'actitle':''}}">{{item.menunm}}</text>
    8. 
					
  8. 
						<view class="menu-under {{edmenuShow==index?'edactive':''}}"></view>
    9. 
					
  9. 
						</view>
    10. 
					
  10. 
						</block>
    11. 
					
  11. 
						</view>
    12. 
					
  12. 
						</view>
    13. 
					
  13. 
						</view>
    14. 
				

				

					 

				

				
    
					
  1. 
						data: {
    2. 
					
  2. 
						 
    3. 
					
  3. 
						// （网页数据）
    4. 
					
  4. 
						 
    5. 
					
  5. 
						edmenu: [
    6. 
					
  6. 
						{ menunm: '登录'},
    7. 
					
  7. 
						{ menunm: '会员注册'},
    8. 
					
  8. 
						{ menunm: '红娘注册'}
    9. 
					
  9. 
						],
    10. 
					
  10. 
						edmenuShow:1,
    11. 
					
  11. 
						 
    12. 
					
  12. 
						},
    13. 
					
  13. 
						// 焦点控制函数
    14. 
					
  14. 
						keyMenu: function (e) {
    15. 
					
  15. 
						let that = this;
    16. 
					
  16. 
						let index = e.currentTarget.dataset.index;
    17. 
					
  17. 
						this.setData({
    18. 
					
  18. 
						edmenuShow: index
    19. 
					
  19. 
						})
    20. 
					
  20. 
						 
    21. 
					
  21. 
						},
    22. 
				

				

					 

				

				
    
					
  1. 
						page{
    2. 
					
  2. 
						">#fff;
    3. 
					
  3. 
						}
    4. 
					
  4. 
						.edition-container{
    5. 
					
  5. 
						font-size: 30rpx;
    6. 
					
  6. 
						color: #333;
    7. 
					
  7. 
						 
    8. 
					
  8. 
						}
    9. 
					
  9. 
						/* 1分类菜单 */
    10. 
					
  10. 
						.edition-menu{
    11. 
					
  11. 
						height: 80rpx;
    12. 
					
  12. 
						border-top: 1px solid #f7f7f7;
    13. 
					
  13. 
						border-bottom: 1px solid #f7f7f7;
    14. 
					
  14. 
						box-sizing: border-box;
    15. 
					
  15. 
						}
    16. 
					
  16. 
						.edition-menu>view{
    17. 
					
  17. 
						width: 33.33%;
    18. 
					
  18. 
						}
    19. 
					
  19. 
						.edition-menu .menu-title{
    20. 
					
  20. 
						margin-top: 16rpx;
    21. 
					
  21. 
						}
    22. 
					
  22. 
						.edition-menu .menu-under{
    23. 
					
  23. 
						width: 140rpx;
    24. 
					
  24. 
						height: 5rpx;
    25. 
					
  25. 
						">transparent ;
    26. 
					
  26. 
						border-radius: 6rpx;
    27. 
					
  27. 
						margin-top: 10rpx;
    28. 
					
  28. 
						}
    29. 
					
  29. 
						.edition-menu .actitle{
    30. 
					
  30. 
						color: #ff4273;
    31. 
					
  31. 
						}
    32. 
					
  32. 
						.edition-menu .edactive{
    33. 
					
  33. 
						">#ff4273;
    34. 
					
  34. 
						}
    35. 
				

					
		

	




            


            


            

            

                

                    易优小程序（企业版）+灵活api+前后代码开源
                    码云仓库:starfork
                

                

                    本文地址：https://www.eyoucms.com/wxmini/doc/course/24107.html 复制链接 
                    如需定制请联系易优客服咨询：800182392 点击咨询 
                

            

          

          

            
            

            
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

          

          


        

      

      

        

          

                        

              

                

                  
                  
                

              

                        

                      

          

            
            

              
              
            

          

        

      

    

  







  

    

            

        
产品

        
      

            

        
服务

        
      

            

        
帮助

        
      

            

        
关于

        
      

            
   
        
工作日 8:30-12:00 14:30-18:00 

          周六及部分节假日提供值班服务

        联系我们 

    

  









  
  

    
    
    

    

     QQ在线咨询