微信小程序 - 8.组件(action-sheet操作反馈上拉菜

2020-03-17  本文已影响0人  GiottoYLY

一、action-sheet

action-sheet

wxml
增加按钮 , 点击触发action-sheet

<button type="primary" bindtap="listenerButton">弹出ActionSheet</button>

js

listenerButton:function(e){
     wx.showActionSheet({
        itemList: ['item1', 'item2', 'item3'],
        success(res){
            console.log(res.tapIndex)
        },
        fail(res){
            console.log(res.errMsg)
        }
    })
},

tapIndex : 用户点击的按钮序号,从上到下的顺序,从0开始

属性名 类型 默认值 说明
itemList Array.<String> 按钮的文字数组 , 数组最大长度为6个
itemColor string #000000 按钮文字颜色
success EventHandle 接口调用成功的回调函数
fail EventHandle 接口调用失败的回调函数
complete EventHandle 接口调用结束的回调函数(调用成功 , 失败都会执行)

二、modal

modal
toTest1 : function(e){
    var that = this   //这句话很重要
    wx.showModal({
        title: '提示',
        content: '是否跳转',
        success(res){
            if(res.confirm){
                that.toNext()  //执行当前js页面的自定义方法
            }else if(res.cancel){
                //吐司吐司
                wx.showToast({
                    title: '取消跳转',
                })
            }
        }
    })
},
toNext : function(){
    //跳转页面
    wx.navigateTo({
        url: '../test1/test1',
    })
},
属性名 类型 默认值 说明
title String 标题
hidden Boolean false 是否隐藏整个弹窗
no-cancel Boolean false 是否隐藏cancel按钮
confirm-text String 确定 confirm按钮文字
cancel-text String 取消 cancel按钮文字
bindconfirm EventHandle 点击确认触发的回调
bindcancel EventHandle 点击取消以及蒙层触发的回调
上一篇 下一篇

猜你喜欢

热点阅读