toast

提示。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">toast</text>
        <text class="page__desc">toast提示</text>
    </view>
    <view class="page__bd">
        <view class="btn-area">
            <view class="body-view">
                <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
                    默认
                </toast>
                <button type="default" bindtap="toast1Tap">点击弹出默认toast</button>
            </view>
            <view class="body-view">
                <toast hidden="{{toast2Hidden}}" icon="{{array[index]}}" bindchange="toast2Change">
                    设置icon
                </toast>
                <button type="default" bindtap="toast2Tap">点击弹出设置icon的toast</button>
            </view>
            <view class="body-view">
                <toast hidden="{{toast3Hidden}}" duration="3000" bindchange="toast3Change">
                    设置duration
                </toast>
                <button type="default" bindtap="toast3Tap">点击弹出设置duration的toast</button>
            </view>

            <picker bindchange="bindPickerChange"  value="{{index}}" range="{{array}}" >
                <view class="picker">当前选择：{{array[index]}}</view>
            </picker>


        </view>
    </view>
</view>

JS

var toastNum = 3
var pageData = {
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
}
pageData.data = {
  array: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],
  index: 0,
  
}
for(var i = 0; i <= toastNum; ++i) {
  pageData.data['toast'+i+'Hidden'] = true;
  (function (index) {
    pageData['toast'+index+'Change'] = function(e) {
      var obj = {}
      obj['toast'+index+'Hidden'] = true;
      this.setData(obj)
    }
    pageData['toast'+index+'Tap'] = function(e) {
      var obj = {}
      obj['toast'+index+'Hidden'] = false
      this.setData(obj)
    }
  })(i)
}
Page(pageData)

API

属性	类型	默认值	必填	说明
hidden	boolean	false	否	是否显示组件
icon	string	success_no_circle	否	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear,其余为空。
duration	number	1500	否	提示消失所需毫秒数

多平台支持

属性	平台支持
hidden
icon
duration

注释：

支付宝不支持该组件