微信小程序——【四】操作反馈（action-sheet,modal,toast,loading）

操作反馈（action-sheet,modal,toast,loading）

actions.wxml文件

<view class="container">
     <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
         <block wx:for="{{actionSheetItems}}">
              <action-sheet-item class="item" bindtap="bindItemTap" data-name="{{item}}" data-type="istype">{{item}}</action-sheet-item>
          </block>
          <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
     </action-sheet>
     <view>
          <button type="primary" bindtap="actionSheetTap">弹出action sheet</button>
     </view>

     <modal title="标题" confirm-text="确定" no-cancel cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
        这是对话框内容
     </modal>
     <modal hidden="[{modalHidden2}]" no-cancel bindconfirm="modalChange2">
         <view>内容可以插入节点</view>
     </modal>
     <button type="primary" bindtap="modalTap">点击弹出modal</button>  
     <button type="primary" bindtap="modalTap2">点击弹出modal2</button> 

     <loading hidden="{{loadingHidden}}" bingchange="loadingChange">
        加载中……
     </loading>
     <toast hidden="{{toast1hidden}}" bindchange="toast1Change">
        默认
     </toast>
     <button type="primary" bindtap="toast1Tap">点击弹出默认toast</button>
     <button type="primary" bindtap="loadingTap">点击弹出loading</button>

</view>

actions.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    actionSheetHidden:true,
    actionSheetItems: ['item1', 'item2', 'item3', 'item4'],
    modalHidden:true,
    modalHidden2:true,
    toast1Hidden:true,
    loadingHidden:true
  },
  actionSheetTap:function(e){
    this.setData({
      actionSheetHidden:!this.data.actionSheetHidden
    })
  },
  actionSheetChange: function (e) {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  modalTap:function(){
    this.setData({
      modalHidden:false
    });
  },
  modalTap2: function () {
    this.setData({
      modalHidden2: false
    });
  },
  modalChange: function () {
    this.setData({
      modalHidden: true
    });
  },
  modalChange2: function () {
    this.setData({
      modalHidden2: true
    });
  },
  toast1Tap: function () {
    this.setData({
      toast1Hidden: false
    });
  },
  toast1Change: function () {
    this.setData({
      toast1Hidden: true
    });
  },
  loadingTap:function(){
    var THIS=this;
    this.setData({
      loadingHidden:false
    });
    setTimeOut(function(){
      THIS.setData({
        loadingHidden:true
        })
    },1500)
  },
  loadingChange:function(){
    console.log("loadingChange");
  },
  bindItemTap:function(e){
    console.log('tap----------'+e.currentTarget.dataset.name);
    console.log('tap----------'+e.currentTarget.dataset.type);
    this.setData({
      actionSheetHidden:!this.data.actionSheetHidden
    })
  }
})

效果图