2019-03-19 wx小程序记录（交互效果）

1. view容器组件和button组件

1.1 触摸改变样式（hover-class）

/*page.wxss */

.hover{

  background-color: gray;

}

<!--page.wxml -->

<button type="default" hover-class="hover"> 点击button </button>

<view hover-class="hover"> 点击view</view>

1.2 button的loading属性

<button loading="{{loading}}" bindtap="tap">操作</button>

//page.js

Page({

  data: { loading: false }

  tap: function() {

    // 把按钮的loading状态显示出来

    this.setData({

      loading: true

    })

    // 接着做耗时的操作

  }

})

2. Toast和模态对话框

2.1 Toast

Page({

  onLoad: function() {

    wx.showToast({ // 显示Toast

      title: '已发送',

      icon: 'success',

      duration: 1500

    })

    // wx.hideToast() // 隐藏Toast

  }

})

特别要注意，我们不应该把Toast用于错误提示，因为错误提示需要明确告知用户具体原因，因此不适合用这种一闪而过的Toast弹出式提示。一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示，同时附带下一步操作的指引。

2.2 模态对话框

onLoad: function() {

    wx.showModal({

      title: '标题',

      content: '告知当前状态，信息和解决方法',

      confirmText: '主操作',

      cancelText: '次要操作',

      success: function(res) {

        if (res.confirm) {

          console.log('用户点击主操作')

        } else if (res.cancel) {

          console.log('用户点击次要操作')

        }

      }

    })

  }