用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序弹出框详解

Rolan 2018-12-7 00:52

小程序弹出框详解qjlx: function() { var itemList = ; wx.showActionSheet({ itemList: itemList, success: function(res) { console.log(res); console.log(itemList); }, fail: function(res) { console.log(res. ...

  1. qjlx: function() {
  2. var itemList = ['病假', '事假'];
  3. wx.showActionSheet({
  4. itemList: itemList,
  5. success: function(res) {
  6. console.log(res);
  7. console.log(itemList[res.tapIndex]);
  8. },
  9. fail: function(res) {
  10. console.log(res.errMsg);
  11. }
  12. })
  13. },

操作菜单——wx.showActionSheet(OBJECT)

效果

效果

  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. actioncnt:function(){
  5. wx.showActionSheet({
  6. itemList: ['A', 'B', 'C'],
  7. success: function(res) {
  8. console.log(res.tapIndex)
  9. },
  10. fail: function(res) {
  11. console.log(res.errMsg)
  12. }
  13. })
  14. }
  15. })

弹出框

  1. <view class='item'>
  2. 登录密码
  3. <view class='bk'>
  4. <input class="textarea" placeholder="{{password}}" value='{{password}}' bindinput="password" maxlength='100' auto-height disabled/>
  5. </view>
  6. <button class='btn' bindtap='dlmm'>修改</button>
  7. <modal hidden="{{hiddenmodalput}}" title="修改密码" confirm-text="提交" cancel-text="取消" bindcancel="cancelM" bindconfirm="confirmM">
  8. <input bindinput='ipsd' type='text' placeholder="请输入原密码..." auto-focus/>
  9. <input bindinput='newipsd' type='password' placeholder="请输入新密码..." />
  10. </modal>
  11. </view>
  1. // js
  2. // 获取登录密码:
  3. password: function(e) {
  4. this.setData({
  5. password: e.detail.value,
  6. })
  7. console.log("获取登录密码:" + this.data.password);
  8. },
  9. // 修改登录密码
  10. dlmm: function(e) {
  11. this.setData({
  12. hiddenmodalput: !this.data.hiddenmodalput
  13. })
  14. },
  15. cancelM: function(e) {
  16. this.setData({
  17. hiddenmodalput: true,
  18. })
  19. },
  20. confirmM: function(e) {
  21. var that = this;
  22. console.log("原密码" + that.data.psd + "新密码" + that.data.newpsd);
  23. that.setData({
  24. hiddenmodalput: true,
  25. })
  26. wx.request({
  27. url: '',
  28. method: 'POST',
  29. header: {
  30. 'Authorization': 'Bearer' + wx.getStorageSync('token'),
  31. },
  32. success(res) {
  33. if (res.data.code == 0) {
  34. wx.showToast({
  35. title: '保存失败',
  36. icon: 'success',
  37. duration: 500
  38. })
  39. } else {
  40. that.getShowToast();
  41. }
  42. }
  43. })
  44. },
  45. ipsd: function(e) {
  46. this.setData({
  47. psd: e.detail.value
  48. })
  49. },
  50. newipsd: function(e) {
  51. this.setData({
  52. newpsd: e.detail.value
  53. })
  54. },

指定modal弹出

效果

  1. <!--show.wxml-->
  2. <view class="container" class="zn-uploadimg">
  3. <button type="primary"bindtap="modalinput">modal有输入框</button>
  4. </view>
  5. <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
  6. <input type='text'placeholder="请输入内容" auto-focus/>
  7. </modal>
  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. data:{
  5. hiddenmodalput:true,
  6. //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
  7. },
  8. //点击按钮痰喘指定的hiddenmodalput弹出框
  9. modalinput:function(){
  10. this.setData({
  11. hiddenmodalput: !this.data.hiddenmodalput
  12. })
  13. },
  14. //取消按钮
  15. cancel: function(){
  16. this.setData({
  17. hiddenmodalput: true
  18. });
  19. },
  20. //确认
  21. confirm: function(){
  22. this.setData({
  23. hiddenmodalput: true
  24. })
  25. }
  26. })

效果

  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. actioncnt:function(){
  5. wx.showActionSheet({
  6. itemList: ['A', 'B', 'C'],
  7. success: function(res) {
  8. console.log(res.tapIndex)
  9. },
  10. fail: function(res) {
  11. console.log(res.errMsg)
  12. }
  13. })
  14. }
  15. })
  1. <!--.wxml-->
  2. <view class="container" class="zn-uploadimg">
  3. <button type="primary"bindtap="modalinput">modal有输入框</button>
  4. </view>
  5. <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
  6. <input type='text'placeholder="请输入内容" auto-focus/>
  7. </modal>
  8. //.js
  9. //获取应用实例
  10. var app = getApp()
  11. Page({
  12. data:{
  13. hiddenmodalput:true,
  14. //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
  15. },
  16. //点击按钮痰喘指定的hiddenmodalput弹出框
  17. modalinput:function(){
  18. this.setData({
  19. hiddenmodalput: !this.data.hiddenmodalput
  20. })
  21. },
  22. //取消按钮
  23. cancel: function(){
  24. this.setData({
  25. hiddenmodalput: true
  26. });
  27. },
  28. //确认
  29. confirm: function(){
  30. this.setData({
  31. hiddenmodalput: true
  32. })
  33. }
  34. })
  1. 达叔小生:往后余生,唯独有你
  2. You and me, we are family !
  3. 90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
  4. 简书博客: 达叔小生
  5. https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注 
小礼物走一走 or 点赞

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 达叔小生 来自: 简书