首页 > 代码库 > 小程序八：操作反馈

小程序八：操作反馈

2024-08-23 06:42:18   222人阅读

action
1、action-sheet
从屏幕底部出现的菜单表。
属性名 类型 默认值 说明
hidden Boolean true 是否隐藏
bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件，不携带数据
2、action-sheet-item
底部菜单表的子选项。
3、action-sheet-cancel
底部菜单表的取消按钮，和action-sheet-item的区别是，点击它会触发action-sheet的change事件，并且外观上会同它上面的内容间隔开来。
示例代码：
index.wxml:
<button type="default" bindtap="actionSheetTap">弹出action sheet</button>  
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">  
    <block wx:for-items="{{actionSheetItems}}">  
        <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>  
    </block>  
    <action-sheet-cancel class="cancel">取消</action-sheet-cancel>  
</action-sheet>

index.js:

var items = [‘item1‘, ‘item2‘, ‘item3‘, ‘item4‘]  
var pageObject = {  
  data: {  
    actionSheetHidden: true,  
    actionSheetItems: items  
  },  
  actionSheetTap: function(e) {  
    this.setData({  
      actionSheetHidden: !this.data.actionSheetHidden  
    })  
  },  
  actionSheetChange: function(e) {  
    this.setData({  
      actionSheetHidden: !this.data.actionSheetHidden  
    })  
  }  
}  
  
for (var i = 0; i < items.length; ++i) {  
  (function(itemName) {  
    pageObject[‘bind‘ + itemName] = function(e) {  
      console.log(‘click‘ + itemName, e)  
    }  
  })(items[i])  
}  
  
Page(pageObject)

modal

对话弹窗
属性名 类型 默认值 说明
title String   标题
hidden Boolean false 是否隐藏整个弹窗
no-cancel Boolean false 是否隐藏cancel按钮
confirm-text String 确定 confirm按钮文字
cancel-text String 取消 cancel按钮文字
bindconfirm EventHandle   点击确认触发的回调
bindcancel EventHandle   点击取消以及蒙层触发的回调
示例：
index.wxml:
<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">  
    这是对话框的内容。  
</modal>  
  
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">  
    <view> 没有标题没有蒙层没有确定的modal </view>  
    <view> 内容可以插入节点 </view>  
</modal>  
  
<view class="btn-area">  
    <button type="default" bindtap="modalTap">点击弹出modal</button>  
    <button type="default" bindtap="modalTap2">点击弹出modal2</button>  
</view>

index.js:

Page({  
  data: {  
    modalHidden: true,  
    modalHidden2: true  
  },  
  modalTap: function(e) {  
    this.setData({  
      modalHidden: false  
    })  
  },  
  modalChange: function(e) {  
    this.setData({  
      modalHidden: true  
    })  
  },  
  modalTap2: function(e) {  
    this.setData({  
      modalHidden2: false  
    })  
  },  
  modalChange2: function(e) {  
    this.setData({  
      modalHidden2: true  
    })  
  },  
})

toast

?消息提示框
属性名 类型 默认值 说明
duration Float 1500 hidden设置false后，触发bindchange的延时，单位毫秒
hidden Boolean false 是否隐藏
bindchange EventHandle   duration延时后触发
示例代码：
index.wxml:
<view class="body-view">  
    <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">  
        默认  
    </toast>  
    <button type="default" bindtap="toast1Tap">点击弹出默认toast</button>  
</view>  
<view class="body-view">  
    <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">  
        设置duration  
    </toast>  
    <button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button>  
</view>

index.js:

var toastNum = 2  
var pageData =http://www.mamicode.com/ {}  
pageData.data = {}  
for (var i = 0; i <= toastNum; ++i) {  
  pageData.data[‘toast‘+i+‘Hidden‘] = true;  
  (function (index) {  
    pageData[‘toast‘+index+‘Change‘] = function(e) {  
      var obj = {}  
      obj[‘toast‘+index+‘Hidden‘] = true;  
      this.setData(obj)  
    }  
    pageData[‘toast‘+index+‘Tap‘] = function(e) {  
      var obj = {}  
      obj[‘toast‘+index+‘Hidden‘] = false  
      this.setData(obj)  
    }  
  })(i)  
}  
Page(pageData)

loading

?消息提示框
属性名 类型 默认值 说明
hidden Boolean false 是否隐藏
示例代码：
index.wmxl:
<view class="body-view">  
    <loading hidden="{{hidden}}">  
        加载中...  
    </loading>  
    <button type="default" bindtap="loadingTap">点击弹出loading</button>  
</view>

index.js：

Page({  
    data: {  
        hidden: true  
    },  
    loadingTap: function(){  
        this.setData({  
          hidden: false  
        });  
        var that = this;  
        setTimeout(function(){  
          that.setData({  
              hidden: true  
          });  
          that.update();  
        }, 3000);  
    }  
})

 

小程序八：操作反馈


联系
我们