找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

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

微信小程序实用组件：城市切换

作者：模板之家 2018-4-8 11:33 8410人关注

js： var city = require(../../utils/city.js); Page({ data: { searchLetter: , showLetter: , winHeight: 0, tHeight:0, bHeight:0, startPageY:0, cityList:, isShowLetter:false, scrollTop:0, city: }, onLoad ...

效果图

js：
 

					
    
						
  1. 
							var city = require('../../utils/city.js');
    2. 
						
  2. 
							 
    3. 
						
  3. 
							 
    4. 
						
  4. 
							Page({
    5. 
						
  5. 
							data: {
    6. 
						
  6. 
							searchLetter: [],
    7. 
						
  7. 
							showLetter: "",
    8. 
						
  8. 
							winHeight: 0,
    9. 
						
  9. 
							tHeight:0,
    10. 
						
  10. 
							bHeight:0,
    11. 
						
  11. 
							startPageY:0,
    12. 
						
  12. 
							cityList:[],
    13. 
						
  13. 
							isShowLetter:false,
    14. 
						
  14. 
							scrollTop:0,
    15. 
						
  15. 
							city:""
    16. 
						
  16. 
							},
    17. 
						
  17. 
							onLoad: function (options) {
    18. 
						
  18. 
							// 生命周期函数--监听页面加载
    19. 
						
  19. 
							var searchLetter = city.searchLetter;
    20. 
						
  20. 
							var cityList=city.cityList();
    21. 
						
  21. 
							// console.log(cityInfo);
    22. 
						
  22. 
							 
    23. 
						
  23. 
							var sysInfo = wx.getSystemInfoSync();
    24. 
						
  24. 
							console.log(sysInfo);
    25. 
						
  25. 
							var winHeight = sysInfo.windowHeight;
    26. 
						
  26. 
							 
    27. 
						
  27. 
							//添加要匹配的字母范围值
    28. 
						
  28. 
							//1、更加屏幕高度设置子元素的高度
    29. 
						
  29. 
							var itemH = winHeight / searchLetter.length;
    30. 
						
  30. 
							var tempObj = [];
    31. 
						
  31. 
							for (var i = 0; i < searchLetter.length; i++) {
    32. 
						
  32. 
							var temp = {};
    33. 
						
  33. 
							temp.name = searchLetter[i];
    34. 
					

				

					
		

	



 		
                

              

               
                            
              
 
               
              
 
            

             
                        
 
              





路过




雷人




握手




鲜花




鸡蛋








 
            


            
 
            

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

                        
          

          

  
      
  
  	


上一篇：微信小程序开发：水平排列布局与滚动视图（scroll-view）
下一篇：微信小程序开发心得第一章：心法修炼

  
        

      

      

    

       
       
      


  	

       
全部回复(0)

            

  
 
    
     
     
    
    
        

      
  




        

    

     










                

           

    

    
    
    

   
    
         

    
     
        

  
 
  
    
    
 
      
 
    

  






 
  
 



 



 

     





    






  

  

    

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


 蜀ICP备12013697号 

    

    

       
 微信：xu08290201   QQ：75283535