小程序 五、交互 [点击状态、button等待状态、Toast弹出提示、可操作的提示框]

1.触摸时的背景色
为<view> <button>提供了hover-class属性。

.hover{
  background-color:gray
}
.wxml
//设置点击时背景色为灰色
<button hover-class="hover"></button>
<view hover-class="hover"></view>

2.点击button处理耗时操作时，需要使用loading属性

<!--.wxml-->
<button loading="{{loading}}" bindtap="onClickSubmit">操作</button>
//.js
Page({
  data:{
    loading:false
  },
  tap:function(){
    this.setData({
      loading:true
    })
    //处理耗时的操作
  }
})

3.Toast弹出式提示

Page({
  onLoad:function(){
    wx.showToast({
      title:'已发送', //设置提示文字
      icon:'success',//设置提示图片 loading  none
      duration:1500//设置提示时间
    })
    wx.hideToast()//隐藏Toast

  }



})

4.模态对话框

Page({
  onLoad:function(){
    wx.showModal({
      title:'标题',
      content:'告知当前状态、信息和解决办法',
      confirmText:'确认操作',
      cancelText:'取消操作',
      success:function(res){
        console.log('用户点击确定操作')
      }else if(res.cancel){
         console.log('用户点击取消操作')
      }
    })
  }
})

5.界面刷新
小程序为页面刷新提供了onPullDownRefresh回调会被触发，

//.json
{
  "enablePullDownRefresh":true,//设置界面启用下拉刷新
  "onReach":100 //设置界面下方距离底部距离以触发上拉加载
}
//.js
Page({
  //用户触发了下拉刷新操作
  onPullDownRefresh:function(){
    //拉取新数据重新渲染界面
    wx.stopPullDownRefresh()//停止当前页面的下拉刷新
  },
  //用户触发了上拉加载操作，界面下方距离底部距离小100时调用。
  onReachBottom:function(){

  }
})