收藏
回答

小程序如何自己开发个dialog组件或者loading组件?

背景:公司项目弹窗样式与小程序自带的showModal样式不一样,如何开发一个自己的弹窗组件,也可以像wx.showModal({})的方式去调用呢(如my.showDialog({}))

回答关注问题邀请回答
收藏

3 个回答

  • Demons
    Demons
    2022-05-11

    参考一下:如何开发一个定制的全局dialog组件?

    https://developers.weixin.qq.com/community/develop/doc/000a0ea8e10080f96eeb1752f5bc00

    2022-05-11
    有用
    回复 1
  • brave
    brave
    2022-05-11

    给个思路: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"",
        isShowfalse
      },
      methods: {
        alert(options) {
                // options可以多个参数
          return new Promise((resolve, reject) => {
            this.action = resolve
            wx.nextTick(() => {
              this.setData({
                ...options,
                isShowtrue
              })
            })
          })
        },
        action() {},
        tapHandler(e) {
          this.action(e.currentTarget.id)
          this.setData({
            isShowfalse
          })
        }
      }
    })
    // 实现效果
    

    若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人

    2022-05-11
    有用 3
    回复
  • 王『小』贱*#
    王『小』贱*#
    2022-05-11

    你把写好的组件放到json中,在页面写好,加上一个变量控制他是否显示,需要现实的时候直接修改那个控制的变量就可以了。

    <alert wx:if="{{isshow}}" title="{{title}}" content="{{content}}"bindhide="hidebindleft="hidebindright="submit"></alert>

    这里就用isshow判断是否需要显示了

    2022-05-11
    有用
    回复
登录 后发表内容