操作反馈组件在小程序的文档中没有,所以我将其平时常用的几种组件展示如下:
- 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来进行参数的获取和操作。
- action.wxml文件
- 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 }) } })
- modal.wxml文件
- 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 }) } })
- toast.wxml文件
- 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) }, })
- toast.wxml文件