小程序
小游戏
企业微信
微信支付
扫描小程序码分享
背景:公司项目弹窗样式与小程序自带的showModal样式不一样,如何开发一个自己的弹窗组件,也可以像wx.showModal({})的方式去调用呢(如my.showDialog({}))
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
参考一下:如何开发一个定制的全局dialog组件?
https://developers.weixin.qq.com/community/develop/doc/000a0ea8e10080f96eeb1752f5bc00
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
给个思路:app.json全局引入alert、页面wxml需要放置alert标签,通过 selectComponent 获取到组件实例进行数据及事件通信。
//父页面 wxml <alert id="assem"></alert> <button bindtap="showAlert">showAlert</button> // 父页面 js showAlert() { this.assem = this.selectComponent("#assem"); this.assem.alert({ text: "标题", }).then((res) => { console.log("res =>", res) }) } // 组件 wxml <block wx:if="{{isShow}}"> <view>text: {{text}}</view> <button id="confirm" bindtap="tapHandler">confirm</button> <button id="cancel" bindtap="tapHandler">cancel</button> </block> // 组件 js Component({ data: { text: "", isShow: false }, methods: { alert(options) { // options可以多个参数 return new Promise((resolve, reject) => { this.action = resolve wx.nextTick(() => { this.setData({ ...options, isShow: true }) }) }) }, action() {}, tapHandler(e) { this.action(e.currentTarget.id) this.setData({ isShow: false }) } } }) // 实现效果
若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人
你把写好的组件放到json中,在页面写好,加上一个变量控制他是否显示,需要现实的时候直接修改那个控制的变量就可以了。
<alert wx:if="{{isshow}}" title="{{title}}" content="{{content}}"bindhide="hide" bindleft="hide" bindright="submit"></alert>
这里就用isshow判断是否需要显示了
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
参考一下:如何开发一个定制的全局dialog组件?
https://developers.weixin.qq.com/community/develop/doc/000a0ea8e10080f96eeb1752f5bc00
给个思路:app.json全局引入alert、页面wxml需要放置alert标签,通过 selectComponent 获取到组件实例进行数据及事件通信。
//父页面 wxml <alert id="assem"></alert> <button bindtap="showAlert">showAlert</button> // 父页面 js showAlert() { this.assem = this.selectComponent("#assem"); this.assem.alert({ text: "标题", }).then((res) => { console.log("res =>", res) }) } // 组件 wxml <block wx:if="{{isShow}}"> <view>text: {{text}}</view> <button id="confirm" bindtap="tapHandler">confirm</button> <button id="cancel" bindtap="tapHandler">cancel</button> </block> // 组件 js Component({ data: { text: "", isShow: false }, methods: { alert(options) { // options可以多个参数 return new Promise((resolve, reject) => { this.action = resolve wx.nextTick(() => { this.setData({ ...options, isShow: true }) }) }) }, action() {}, tapHandler(e) { this.action(e.currentTarget.id) this.setData({ isShow: false }) } } }) // 实现效果
若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人
你把写好的组件放到json中,在页面写好,加上一个变量控制他是否显示,需要现实的时候直接修改那个控制的变量就可以了。
<alert wx:if="{{isshow}}" title="{{title}}" content="{{content}}"bindhide="hide" bindleft="hide" bindright="submit"></alert>
这里就用isshow判断是否需要显示了