小程序模板網(wǎng)

微信小程序例子——手機(jī)振動功能\動態(tài)設(shè)置頁面標(biāo)題\控制導(dǎo)航條加載動畫 ..

發(fā)布時間：2018-04-20 11:06 所屬欄目：小程序開發(fā)教程

一、手機(jī)振動功能

1、關(guān)鍵代碼

1）WXML文件

 

 1
 2
 

										

											<button bindtap="vibrateLongTap">振動（400ms）</button>

										

											<button bindtap="vibrateShortTap">振動（15ms）</button>

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.txt

	





	 



	2）js文件



	 



	

		

			

				

					

						
							

								
									

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10

										
								
									

										



										

											Page({

										

											vibrateLongTap:function(){

										

											// 使手機(jī)振動400ms

										

											wx.vibrateLong();

										

											},

										

											vibrateShortTap:function(){

										

											// 使手機(jī)振動15ms

										

											wx.vibrateShort();

										

											}

										

											})

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.js

	





	 



	3）WXSS文件



	 



	

		

			

				

					

						
							

								
									

 1

										
								
									

										



										

											empty

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.txt

	





	 



	2、源代碼獲取方式



	百度云鏈接：http://pan.baidu.com/s/1b7ipNC



	 



	 



	二、動態(tài)設(shè)置頁面標(biāo)題



	 1、效果展示



	



	2、關(guān)鍵代碼



	1）WXML文件



	 



	

		

			

				

					

						
							

								
									

 1
 2
 3
 4

										
								
									

										



										

											<button bindtap="setBiaoTi1">標(biāo)題1</button>

										

											<button bindtap="setBiaoTi2">標(biāo)題2</button>

										

											<button bindtap="setBiaoTi3">標(biāo)題3</button>

										

											<button bindtap="back">還原</button>

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.txt

	





	 



	2）js文件



	 



	

		

			

				

					

						
							

								
									

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26

										
								
									

										



										

											Page({

										

											// 設(shè)置標(biāo)題為：標(biāo)題1

										

											setBiaoTi1:function(){

										

											wx.setNavigationBarTitle({

										

											title: '標(biāo)題1',

										

											})

										

											},

										

											// 設(shè)置標(biāo)題為：標(biāo)題2

										

											setBiaoTi2: function () {

										

											wx.setNavigationBarTitle({

										

											title: '標(biāo)題2',

										

											})

										

											},

										

											// 設(shè)置標(biāo)題為：標(biāo)題3

										

											setBiaoTi3: function () {

										

											wx.setNavigationBarTitle({

										

											title: '標(biāo)題3',

										

											})

										

											},

										

											// 設(shè)置標(biāo)題為：動態(tài)設(shè)置頁面標(biāo)題

										

											back:function(){

										

											wx.setNavigationBarTitle({

										

											title: '動態(tài)設(shè)置頁面標(biāo)題',

										

											})

										

											}

										

											})

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.js

	





	 



	3）WXSS文件



	 



	

		

			

				

					

						
							

								
									

 1
 2
 3

										
								
									

										



										

											button{

										

											margin-top:10px;

										

											}

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.txt

	





	 



	3、源碼獲取



	百度云鏈接：http://pan.baidu.com/s/1mhAlJb6



	 



	三：控制導(dǎo)航條加載動畫



	 



	1、效果展示



	



	2、關(guān)鍵代碼



	1）WXML文件



	 



	

		

			

				

					

						
							

								
									

 1

										
								
									

										



										

											empty

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.txt

	





	 



	 



	2）js文件



	 



	

		

			

				

					

						
							

								
									

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10

										
								
									

										



										

											Page({

										

											// 顯示導(dǎo)航條加載動畫

										

											showNavigationBarLoadingTap:function(){

										

											wx.showNavigationBarLoading();

										

											},

										

											// 隱藏導(dǎo)航條加載動畫

										

											hideNavigationBarLoadingTap:function(){

										

											wx.hideNavigationBarLoading();

										

											}

										

											})

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.js

	





	 



	 



	3）WXSS文件



	 



	

		

			

				

					

						
							

								
									

 1
 2
 3
 4
 5

										
								
									

										



										

											button{

										

											margin:10px;

										

											margin-bottom: 0px;

										

											font-size: 11pt;

										

											}

									

										
							

						
					

				

			

		

		

			 來自CODE的代碼片

		

			snippet_file_0.txt

	





	 



	 



	3、源碼獲取方式



	百度云鏈接：http://pan.baidu.com/s/1o7GnrjO



	 



	 



	4、在控制導(dǎo)航條加載動畫的過程中有遇到任何問題或者不明白的地方，歡迎添加我的微信進(jìn)行咨詢，感謝支持！

            


            


            

            

                

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

                

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

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢