欢迎光临,了解微信小程序开发,就上易用通!

微信小程序例子——手机振动功能\动态设置页面标题\控制导航条加载动画 ..

发布:2018-04-20 11:06浏览: 来源:网络 作者:cola


一、手机振动功能

1、关键代码

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(){
// 使手机振动400ms
wx.vibrateLong();
},
vibrateShortTap:function(){
// 使手机振动15ms
wx.vibrateShort();
}
})
 来自CODE的代码片
snippet_file_0.js

 

3)WXSS文件

 


 1

empty
 来自CODE的代码片
snippet_file_0.txt

 

2、源代码获取方式

百度云链接:https://pan.baidu.com/s/1b7ipNC

 

 

二、动态设置页面标题

 1、效果展示

微信小程序例子——手机振动功能\动态设置页面标题\控制导航条加载动画 ..(图1)

2、关键代码

1)WXML文件

 


 1
 2
 3
 4

<button bindtap="setBiaoTi1">标题1</button>
<button bindtap="setBiaoTi2">标题2</button>
<button bindtap="setBiaoTi3">标题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({
// 设置标题为:标题1
setBiaoTi1:function(){
wx.setNavigationBarTitle({
title: '标题1',
})
},
// 设置标题为:标题2
setBiaoTi2: function () {
wx.setNavigationBarTitle({
title: '标题2',
})
},
// 设置标题为:标题3
setBiaoTi3: function () {
wx.setNavigationBarTitle({
title: '标题3',
})
},
// 设置标题为:动态设置页面标题
back:function(){
wx.setNavigationBarTitle({
title: '动态设置页面标题',
})
}
})
 来自CODE的代码片
snippet_file_0.js

 

3)WXSS文件

 


 1
 2
 3

button{
margin-top:10px;
}
 来自CODE的代码片
snippet_file_0.txt

 

3、源码获取

百度云链接:https://pan.baidu.com/s/1mhAlJb6

 

三:控制导航条加载动画

 

1、效果展示

微信小程序例子——手机振动功能\动态设置页面标题\控制导航条加载动画 ..(图2)

2、关键代码

1)WXML文件

 


 1

empty
 来自CODE的代码片
snippet_file_0.txt

 

 

2)js文件

 


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10

Page({
// 显示导航条加载动画
showNavigationBarLoadingTap:function(){
wx.showNavigationBarLoading();
},
// 隐藏导航条加载动画
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、源码获取方式

百度云链接:https://pan.baidu.com/s/1o7GnrjO

 

 

4、在控制导航条加载动画的过程中有遇到任何问题或者不明白的地方,欢迎添加我的微信进行咨询,感谢支持!





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