找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

微信小程序获取用户头像和昵称，顶部导航栏的实现

作者：模板之家 2018-2-6 15:59 1482人关注

一：顶部导航栏的实现 view class = swiper-tab view class = swiper-tab-list {{currentTab==0 ? on : }} data-current = 0 bindtap = swichNav 11 /view view class = swiper-tab-list {{currentTab==1 ? on : }} ...

一：顶部导航栏的实现

 


    
	
  1. 
		<view class="swiper-tab"> 
    2. 
	
  2. 
		<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> 
    3. 
	
  3. 
		<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">22</view> 
    4. 
	
  4. 
		<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">33</view> 
    5. 
	
  5. 
		<view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">44</view> 
    6. 
	
  6. 
		<view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">55</view> 
    7. 
	
  7. 
		</view> 
    8. 
	
  8. 
		 
    9. 
	
  9. 
		<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 
    10. 
	
  10. 
		<!-- 我是哈哈 --> 
    11. 
	
  11. 
		<swiper-item> 
    12. 
	
  12. 
		<view>我是哈哈</view> 
    13. 
	
  13. 
		</swiper-item> 
    14. 
	
  14. 
		<!-- 我是呵呵 --> 
    15. 
	
  15. 
		<swiper-item> 
    16. 
	
  16. 
		<view>我是呵呵</view> 
    17. 
	
  17. 
		</swiper-item> 
    18. 
	
  18. 
		<!-- 我是嘿嘿 --> 
    19. 
	
  19. 
		<swiper-item> 
    20. 
	
  20. 
		<view>我是嘿嘿</view> 
    21. 
	
  21. 
		</swiper-item> 
    22. 
	
  22. 
		<swiper-item> 
    23. 
	
  23. 
		<view>我是嘿嘿</view> 
    24. 
	
  24. 
		</swiper-item> 
    25. 
	
  25. 
		<swiper-item> 
    26. 
	
  26. 
		<view>我是嘿嘿</view> 
    27. 
	
  27. 
		</swiper-item> 
    28. 
	
  28. 
		</swiper> 
    29. 




	 




    
	
  1. 
		.swiper-tab{ 
    2. 
	
  2. 
		width: 100%; 
    3. 
	
  3. 
		border-bottom: 2rpx solid #777777; 
    4. 
	
  4. 
		text-align: center; 
    5. 
	
  5. 
		line-height: 80rpx; 
    6. 
	
  6. 
		} 
    7. 
	
  7. 
		.swiper-tab-list{ font-size: 30rpx; 
    8. 
	
  8. 
		display: inline-block; 
    9. 
	
  9. 
		width: 20%; 
    10. 
	
  10. 
		color: #777777; 
    11. 
	
  11. 
		} 
    12. 
	
  12. 
		.on{ color: #da7c0c; 
    13. 
	
  13. 
		border-bottom: 5rpx solid #da7c0c;} 
    14. 
	
  14. 
		.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
    15. 
	
  15. 
		.swiper-box view{ 
    16. 
	
  16. 
		text-align: center; 
    17. 
	
  17. 
		} 
    18. 




	 




    
	
  1. 
		var app = getApp() 
    2. 
	
  2. 
		Page( { 
    3. 
	
  3. 
		data: { 
    4. 
	
  4. 
		/** 
    5. 
	
  5. 
		* 页面配置 
    6. 
	
  6. 
		*/ 
    7. 
	
  7. 
		winWidth: 0, 
    8. 
	
  8. 
		winHeight: 0, 
    9. 
	
  9. 
		// tab切换 
    10. 
	
  10. 
		currentTab: 0, 
    11. 
	
  11. 
		}, 
    12. 
	
  12. 
		onLoad: function() { 
    13. 
	
  13. 
		var that = this; 
    14. 
	
  14. 
		 
    15. 
	
  15. 
		/** 
    16. 
	
  16. 
		* 获取系统信息 
    17. 
	
  17. 
		*/ 
    18. 
	
  18. 
		wx.getSystemInfo( 
                 
                邀请 
              
     
               
              
     
            
             
                        
     
              
    

    


    路过    
    		



    雷人    
    		



    握手    
    		



    鲜花    
    		



    鸡蛋    
    		

    

    



 
            
    

            
     
            
    
                  原作者: 模板之家 
                  来自: 网络收集 
                   
                   
                              
    
                        
          
          
    
  
      
  
  	
    

    上一篇：微信小程序radio不能改变大小？那我自己写一个吧
    下一篇：ngrok 服务搭建内网穿透，多张image图片排列有空隙解决方案
    
  
        
      
      
    
    
       
       
      

    
  	
    
       
    全部回复(0)
    
            
    
  
     
    
     
     
    
      
        
    
      
  
    

    

        
    
    
    
     
    

    

    


    

    
                
    
           
    
    
    
    
    
    

   
    
         

    
     
        
  
     
  
    
    
     
      
     
    
    
  
    




     
  
     

    

 

 

     




    
    

    



    
  
    
  
    
    
    
      
    Copyright © Comsenz Inc. Powered by Discuz!X3.5 


 蜀ICP备12013697号 
    
    
    
    
    
       
     微信：xu08290201   QQ：75283535