本帖最后由 AMay 于 2018-9-21 12:42 编辑
【前言】
【其他组件】 1. modal：（对话框） wxml代码 点击按钮显示对话框，点击确认按钮或取消按钮隐藏对话框。 [HTML] 纯文本查看 复制代码 <button bindtap='modalShow'>modalShow</button>
<modal title='我是标题' confirm-text='确认' cancle-text='取消' hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">我是内容</modal>
Js代码 [JavaScript] 纯文本查看 复制代码 Page({
/**
* 页面的初始数据
*/
data: {
modalHidden: true,
},
modalShow: function () {
this.setData({ modalHidden: false })
},
modalConfirm: function () {
this.setData({ modalHidden: true })
},
modalCancel: function () {
this.setData({ modalHidden: true })
}
})效果： 下面介绍一下这个组件的属性 title 标题 confirm-text 确认按钮上的字 cancle-text 取消按钮上的字 bindconfirm 点击确认时触发的事件 bindcancel 点击取消时触发的事件
2. toast组件 wxml代码 点击按钮显示吐司，本例中吐司的持续时间为2秒，2秒后会触发bindchange函数，手动隐藏toast（其中的duration为吐司的持续时间） [HTML] 纯文本查看 复制代码 <button bindtap='toastShow'>toastShow</button>
<toast hidden="{{toastHidden}}" bindchange="toastChange" duration="2000">我是吐司</toast>
Js代码 [JavaScript] 纯文本查看 复制代码 Page({
/**
* 页面的初始数据
*/
data: {
toastHidden: true,
},
//点击按钮
toastShow: function () {
this.setData({ toastHidden: false })
},
//吐司的持续时间到了自动触发
toastChange: function () {
this.setData({ toastHidden: true })
}}) 效果： 3. loading（加载框）组件 wxml代码： 点击按钮显示加载框，模拟数据请求，两秒后隐藏加载框（不同于toast，没有duration属性） [HTML] 纯文本查看 复制代码 <button bindtap='loadingShow'>loadingShow</button>
<loading hidden="{{loadingHidden}}">加载中...</loading>
Js代码 [JavaScript] 纯文本查看 复制代码 Page({
/**
* 页面的初始数据
*/
data: {
loadingHidden: true,
},
loadingShow: function () {
this.setData({ loadingHidden: false })
var that = this
setTimeout(function () {
that.setData({
loadingHidden: true
})
}, 2000)
}
})效果
注意：其实目前的微信公众平台组件列表已经没有上述的四个组件了，我们可以调用微信的api来使用以上四个操作反馈组件。
Wxml代码： [HTML] 纯文本查看 复制代码 <button bindtap="showToast">showToast</button>
<button bindtap="showLoading">showLoading</button>
<button bindtap='showModal'>showModal</button>
<button bindtap='showActionSheet'>showActionSheet</button>
Js代码： [JavaScript] 纯文本查看 复制代码 Page({[/align]
/**
* 页面的初始数据
*/
data: {
},
//展示吐司
showToast: function () {
wx.showToast({
title: '我是吐司',
duration: 2000,
icon: "loading"
})
},
//展示等待框，请求数据完成后需要手动调用wx.hideLoading()隐藏
showLoading: function () {
wx.showLoading({
title: '我是loading',
})
setTimeout(function () {
wx.hideLoading()
}, 2000);
},
//展示对话框
showModal: function () {
wx.showModal({
title: '提示',
content: '这是一个对话框',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
//显示操作菜单
showActionSheet: function () {
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
//用户点击的按钮，从上到下的顺序，从0开始
success: function (res) {
console.log("success" + res.tapIndex)
},
//点击取消会走fail
fail: function (res) {
console.log("fail" + res.errMsg)
}
})
}
}) | 
收藏
淘帖
踩
