小程序模板網(wǎng)

微信小程序 仿美團分類菜單 swiper分類菜單

發(fā)布時間：2017-12-12 17:53 所屬欄目：小程序開發(fā)教程

分類菜單微信小程序開發(fā)之選項卡(窗口頂部TabBar)頁面切換很類似

 
 
 

有同學要仿美團分類菜單.寫了一個. 
跟 微信小程序開發(fā)之選項卡(窗口頂部TabBar)頁面切換很類似

仿美團分類菜單

代碼: 
js就這么一點

 

		
    
			
  1. 
				//index.js 
    2. 
			
  2. 
				//獲取應用實例 
    3. 
			
  3. 
				var app = getApp()
    4. 
			
  4. 
				Page({
    5. 
			
  5. 
				data: {
    6. 
			
  6. 
				currentTab: 0,
    7. 
			
  7. 
				grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    8. 
			
  8. 
				swiperList:[0, 1, 2, 3, 4]
    9. 
			
  9. 
				},
    10. 
			
  10. 
				onLoad: function () {
    11. 
			
  11. 
				},
    12. 
			
  12. 
				click: function (e) {
    13. 
			
  13. 
				console.log(e.currentTarget.dataset.id)
    14. 
			
  14. 
				console.log(e.currentTarget.dataset.index)
    15. 
			
  15. 
				wx.showToast({
    16. 
			
  16. 
				title: '第' + e.currentTarget.dataset.id + '欄' + '第' + e.currentTarget.dataset.index + '個',
    17. 
			
  17. 
				icon: 'success',
    18. 
			
  18. 
				duration: 1500
    19. 
			
  19. 
				})
    20. 
			
  20. 
				},
    21. 
			
  21. 
				/** 
    22. 
			
  22. 
				* 滑動切換tab 
    23. 
			
  23. 
				*/
    24. 
			
  24. 
				bindChange: function (e) {
    25. 
			
  25. 
				console.log(e.detail.current)
    26. 
			
  26. 
				this.setData({ currentTab: e.detail.current });
    27. 
			
  27. 
				},
    28. 
			
  28. 
				})
    29. 
		

	





            


            


            

            

                

                    易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
                    碼云倉庫:starfork
                

                

                    本文地址：http://22321a.com/wxmini/doc/course/18144.html 復制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢