操作反馈组件

操作反馈组件在小程序的文档中没有，所以我将其平时常用的几种组件展示如下：

• action-sheet：从底部弹出来的弹窗
  • action.wxml文件

    <view class="container">
        <button type="primary" bindtap="click">点击从底部出来弹框 </button >
        <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
              <action-sheet-item bindtap="itemClick" data-name="name1" data-id="1">item1</action-sheet-item>
              <action-sheet-item bindtap="itemClick" data-name="name2">item2</action-sheet-item>
              <action-sheet-item bindtap="itemClick" data-name="name3">item3</action-sheet-item>
              <action-sheet-cancel >取消</action-sheet-cancel>
        </action-sheet>
    </view>
    

  • action.js文件

    Page({
      data: {
        actionSheetHidden: true
      },
      click: function () {
        this.setData({ actionSheetHidden: false })
      },
      actionSheetChange: function () {
        this.setData({ actionSheetHidden: true })
      },
      itemClick: function (event) {
        //console.log(event)
      }
    
    })
    

  • 代码说明
    首先，在页面中的action-sheet里绑定一个函数bindchange=“actionSheetChange”，然后在action.js中的data里给个默认值为true，默认隐藏为真，表示默认不显示。然后在下面的点击函数中给其设置值为false，点击后显示该弹窗。接着再看之前绑定的actionSheetHidden函数和itemClick函数，都给其设置值为true，表示点击其他的后隐藏掉弹窗。其中的itemClick函数里，我们可以根据参数event来进行参数的获取和操作。
• modal：模式对话框
  • modal.wxml文件

    <view class="container">
        <button type="primary" bindtap="click">模式对话框</button >
    
        <modal title="标题" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}" 
             bindconfirm="modalConfirm" bindcancel="modalCancel">
            这是对话框的内容。
      </modal>
    </view>
    

  • modal.js文件

    Page({
    	data: {
        modalHidden: true
      },
      click: function () {
        this.setData({ modalHidden: false })
      },
      modalConfirm: function () {
        console.log("modalConfirm")
        this.setData({ modalHidden: true })
      },
      modalCancel: function () {
        console.log("modalCancel")
        this.setData({ modalHidden: true })
      }
    })
    

• toast:消息提示框
  • toast.wxml文件

    <view class="container">
    	<button type="primary" bindtap="click"> 消息提示框</button >
    
    	 <toast hidden="{{toastHidden}}" duration="3000" bindchange="toastChange">
        默认
    </toast>
    </view>
    

  • toast.js文件

    Page({
    	data: {
        toastHidden: true
      },
      click: function () {
        this.setData({ toastHidden: false })
      },
    
      toastChange: function () {
        //console.log("toastChange")
        this.setData({ toastHidden: true })
      }
    })
    

  注意：这里的WXML中的中多了个duration属性，意思是表示维持的时间，当时间一过后，就会触发后面的bindchange="toastChange"函数。
• loading
  • toast.wxml文件

    <view class="container">
    	 <button type="primary" bindtap="click">加载中</button >
    	 <loading hidden="{{loadinHidden}}" >加载中...</loading>
    </view>
    

  • toast.js文件

    Page({
    	data: {
        loadinHidden: true
      },
      click: function () {
        this.setData({ loadinHidden: false })
    
        var that = this;
        setTimeout(function () {
          that.setData({ loadinHidden: true })
        }, 1500)
      },
    })