在 WeUI 中,"操作反馈"是指通过消息提示、加载中、对话框等方式,向用户提供操作的结果或进行进一步的交互。以下是一些 WeUI 中常用的操作反馈组件的使用示例:

1. 消息提示(Toast):
   <view>
     <button class="weui-btn" bindtap="showToast">显示消息</button>
     <toast hidden="{{!toastHidden}}">提示消息</toast>
   </view>

   在相应的 JS 文件中,需要定义 showToast 函数来显示消息提示:
   Page({
     data: {
       toastHidden: true,
     },
     showToast: function () {
       this.setData({
         toastHidden: false,
       });

       // 3秒后隐藏消息提示
       setTimeout(() => {
         this.setData({
           toastHidden: true,
         });
       }, 3000);
     },
   });

2. 加载中(Loading):
   <view>
     <button class="weui-btn" bindtap="showLoading">显示加载中</button>
     <loading hidden="{{!loadingHidden}}">加载中...</loading>
   </view>

   在相应的 JS 文件中,需要定义 showLoading 函数来显示加载中提示:
   Page({
     data: {
       loadingHidden: true,
     },
     showLoading: function () {
       this.setData({
         loadingHidden: false,
       });

       // 模拟加载完成后隐藏加载中
       setTimeout(() => {
         this.setData({
           loadingHidden: true,
         });
       }, 3000);
     },
   });

3. 对话框(Dialog):
   <view>
     <button class="weui-btn" bindtap="showDialog">显示对话框</button>
     <dialog hidden="{{!dialogHidden}}" bindcancel="hideDialog" bindconfirm="confirmDialog">
       <view>这是一个对话框</view>
     </dialog>
   </view>

   在相应的 JS 文件中,需要定义 showDialog 函数来显示对话框,并定义 hideDialog 和 confirmDialog 函数来处理取消和确认操作:
   Page({
     data: {
       dialogHidden: true,
     },
     showDialog: function () {
       this.setData({
         dialogHidden: false,
       });
     },
     hideDialog: function () {
       this.setData({
         dialogHidden: true,
       });
     },
     confirmDialog: function () {
       console.log('用户点击了确认');
       this.setData({
         dialogHidden: true,
       });
     },
   });

这是一些 WeUI 操作反馈组件的简单用法示例。你可以根据实际需求和 WeUI 的文档进一步定制和使用不同类型的操作反馈组件,以满足项目的需求。


转载请注明出处:http://www.zyzy.cn/article/detail/1333/微信小程序